ホームページ ウェブフロントエンド jsチュートリアル jQuery による要素のドラッグと要素の並べ替え_jquery

jQuery による要素のドラッグと要素の並べ替え_jquery

May 16, 2016 pm 03:22 PM
jquery 要素 引っ張る 選別

この記事の例は、jQuery を使用して要素をドラッグして並べ替える実装方法を説明しています。具体的な実装内容は次のとおりです。

レンダリング:

具体的な内容は以下の通りです:

上の画像から、今日実装したい機能がわかります。ユーザーが画像をドラッグすると、画像の既存の並べ替えを変更し、テーブル内の順序を更新できます。たとえば、Google iGoogle がすでに実装しているように、ユーザーは Web サイトのレイアウトを自由にドラッグできます。これにより、ユーザー エクスペリエンスが大幅に向上します。

以下では、この関数を段階的に実装していきます。

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <jQuery による要素のドラッグと要素の並べ替え_jquery alt="jQuery による要素のドラッグと要素の並べ替え_jquery" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>
ログイン後にコピー

ラジオボタンがあり、これを選択すると、画像をドラッグしたときにデータベース内のデータの並び替えが変更されます。隠しフィールドには、写真の元の順序が保存されます。 ulは画像の一覧を表示します。

見やすくするために、少しスタイルを追加しました:

var show = jQuery("#show"); //输出提示 
var orderlist = jQuery("#orderlist"); //原顺序 
var check = jQuery("#check"); //是否更新到数据库
ログイン後にコピー

最初によく使用されるセレクターを保存して、後で呼び出しやすくします。これなら誰もが間違いなく問題ないでしょう。 ^_^

//保存原来的排列顺序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列顺序保存在title,得到后更改title 
  jQuery(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join(','));
ログイン後にコピー

元の並べ替え順序を非表示フィールドに保存します。ここでは配列のpush()メソッドを使用しており、ulの各liのタイトル(元の並び順)を配列に追加しています。最後に、join() メソッドを使用して元の配置順序を取得し、文字列を返します。並べ替え順序の形式は 1、2、3 になりました。

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列对应的ID,order:原排列顺序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};
ログイン後にコピー

次に、ajax 更新ブロックを個別に分離します。このようにしてプログラムはよりクリーンになり、この領域には新しいものは何もありません。

//调用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果单选框选中,则更新表中排列顺序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};
ログイン後にコピー

並べ替え順序の取得と同様に、ID は文字列に構成され、Update() メソッドに渡されます。関数内のパラメータの更新は、チェックボックスが選択されているかどうかです。

//执行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});
ログイン後にコピー

最後に並べ替え操作を行います。背景の部分は、元の配列順序に対応する現在の ID の更新です。これは誰もがよく知っていると思います。

データベース操作が実行されない場合、プラグインは要素のドラッグを完​​了するためにsorttableを呼び出すだけでよいことがわかります。

以上はjQueryの要素のドラッグと要素の並べ替えの実装方法でしたので、皆様の学習の参考になれば幸いです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

エクセルで並べ替える方法 エクセルで並べ替える方法 Mar 05, 2024 pm 04:12 PM

エクセルで並べ替える方法

WPS スコアを並べ替える方法 WPS スコアを並べ替える方法 Mar 20, 2024 am 11:28 AM

WPS スコアを並べ替える方法

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

Power Query で複数の列をドラッグ アンド ドロップで並べ替える方法 Power Query で複数の列をドラッグ アンド ドロップで並べ替える方法 Mar 14, 2024 am 10:55 AM

Power Query で複数の列をドラッグ アンド ドロップで並べ替える方法

データ統計を容易にするために WPS テーブルをソートする方法 データ統計を容易にするために WPS テーブルをソートする方法 Mar 20, 2024 pm 04:31 PM

データ統計を容易にするために WPS テーブルをソートする方法

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

PHP 配列の高度な並べ替え: カスタム コンパレーターと匿名関数 PHP 配列の高度な並べ替え: カスタム コンパレーターと匿名関数 Apr 27, 2024 am 11:09 AM

PHP 配列の高度な並べ替え: カスタム コンパレーターと匿名関数

See all articles