jQuery による要素のドラッグと要素の並べ替え_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の要素のドラッグと要素の並べ替えの実装方法でしたので、皆様の学習の参考になれば幸いです。