<div class="codetitle"> <span><a style="CURSOR: pointer" data="21381" class="copybut" id="copybut21381" onclick="doCopy('code21381')"><u>复制代幣</u></a></span>代码如下:</div> <div class="codebody" id="code21381"> <br><html xmlns="http://www.w3.org /1999/xhtml"<head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>jQuery ダイナミック ドラッグ アンド ドロップ</title> <br><script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js">< /script><style type="text/css"></style> <br><script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js" ></スクリプト> <br> <br>body { <br>font-family: Arial、Helvetica、sans-serif; <br>フォントサイズ: 16px; <br>マージントップ: 10px; <br>} <br>ul { <br>マージン: 0; <br>} <br>#contentWrap { <br>幅: 700px; <br>マージン: 0 自動; <br>高さ: 自動; <br>オーバーフロー: 非表示; <br>} <br>#contentTop { <br>幅: 600px; <br>パディング: 10px; <br>マージン左: 30px; <br>} <br>#contentLeft { <br>float: left; <br>幅: 400ピクセル; <br>} <br>#contentLeft li { <br>リストスタイル: なし; <br>マージン: 0 0 4px 0; <br>パディング: 10px; <br>背景色:#00CCCC; <br>ボーダー: #CCCCCC 実線 1px; <br>色:#fff; <br>} <br><br>#contentRight { <br>float: right; <br>幅: 260px; <br>パディング:10px; <br>背景色:#336600; <br>カラー:#FFFFFF; <br>} <br></style> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br><br>$(function() { <br>$("#contentLeft ul").sortable({ 不透明度: 0.5、カーソル: '移動' 、更新: function() { <br>var id=""; <br>$("ul.ui-sortable li").each(function(){ <br>id =$(this).attr(" id") "<br/>"; <BR>}) <BR>$("#contentRight").html(id); <BR>} <BR>}); <BR>}); <BR>}); <BR></script> <br></head> <br><body style="cursor: auto;"> <br><div id="contentWrap"> <br><br><div id="contentLeft"> <br><ul class="ui-sortable"> <br><li id="recordsArray_3" style="不透明度: 1; z-index: 0;"クラス="">3.返された配列は右側にあります</li> <br><li id="recordsArray_2">2.ドラッグするとアイテムの不透明度が変更されます</li> <br><li id="recordsArray_1" style="不透明度: 1; z-index: 0;"クラス="">1.ドロップされると、Ajax クエリがアクティブ化されます</li> <br><li id="recordsArray_4" style="不透明度: 1; z-index: 0;"クラス="">4.とてもとても簡単です</li> <br><li id="recordsArray_5" style="不透明度: 1; z-index: 0;"クラス="">5.とてもとても簡単です</li> <br><li id="recordsArray_6" style="不透明度: 1; z-index: 0;"クラス="">6.とてもとても簡単です</li> <br><li id="recordsArray_7" style="不透明度: 1; z-index: 0;"クラス="">7.とてもとても簡単です</li> <br> <br> </li> </div> <br><div id="contentRight"></div> <br> <br></body></html> <br> <br><a href="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/" target="_blank">デモ地址</a>