jqueryは要素のドラッグソートを実装します（コードが添付されています）-jsチュートリアル-php.cn

jqueryは要素のドラッグソートを実装します（コードが添付されています）

php中世界最好的语言

リリース： 2018-04-26 09:28:22

オリジナル

2197 人が閲覧しました

今回は、jquery で要素のドラッグソートを実装するための (コード付き) をご紹介します。jquery で要素のドラッグソートを実装するための注意事項は何ですか。実際のケースを見てみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jquery学习-jquery对元素拖动排序</title> 
<style type="text/css"> 
#show 
{ 
color: Red; 
} 
#list 
{ 
cursor: move; 
width: 300px; 
} 
#list li 
{ 
border: solid 1px yellow; 
float: left; 
list-style-type
: none; 
margin-top: 10px;

ログイン後にコピー

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

rreee

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

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

<span id="show">
<p>
  <input id="check" type="checkbox" />
</p>
<p>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</p>

ログイン後にコピー

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

var show = jQuery("#show"); //输出提示 
var orderlist = jQuery("#orderlist"); //原顺序 
var check = jQuery("#check"); //是否更新到数据库

ログイン後にコピー

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

//保存原来的排列顺序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列顺序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join(&#39;,&#39;));

ログイン後にコピー

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

//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("更新成功"); 
    } 
  }); 
};

ログイン後にコピー

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

//调用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(&#39;,&#39;); 
  //如果单选框选中，则更新表中排列顺序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

ログイン後にコピー

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

データベース操作

が実行されない場合、プラグインは要素のドラッグを完了するためにsorttableを呼び出すだけでよいことがわかります。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

sortElementsを使用してテーブルソートを実装する手順の詳細な説明

jqueryを使用してテーブルソート+リアルタイム検索機能を実装する

以上がjqueryは要素のドラッグソートを実装します（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。