// 做學習參考的話，重點看3就可以了， 前面的1跟2 都有些問題， 這是很早之前寫的了，由於時間原因顧不上細細修改了，
// 具體 就是修改 $('.ui-draggable-dragging').html（） 結構， 使得拖動過程中的樣式美觀，
//('.this_a') 是要去拖目標對象的身份識別ID，('.this_b') 是對應得具體內容， 后面在去重判斷時會用到。
// 詳細的 可以去參考 官網或 菜鳥教程 http://www.runoob.com/jqueryui/example-draggable.html 本文這個有時間的話，我會在整理整理。謝謝！！！
1.帶去重復帶復制拖拽
<!DOCTYPE html> <html> <head lang="en"> <script type="text/javascript" language="javascript" src="js/trirand/jquery-1.11.1.min.js"></script> <script type="text/ecmascript" src="js/trirand/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/trirand/jquery-ui.css" /> <style> .goal_item{ float: left; margin-right: -1px; border:solid 1px #D9E1EB; height: 210px; } .goal_item dt{ border-bottom:solid 1px #D9E1EB; font: normal 14px/34px "Microsoft YaHei","微軟雅黑"; text-align: center; padding: 0 14px; background-color: #E7F1FF; } .goal_item dd{ height: 176px; width: 124px; text-align: center; overflow-x: hidden; overflow-y:auto; } .goal_item ul{ height: 100%; float: left; width: 100%; padding-top: 15px; } .goal_item li{ padding-bottom: 15px; } .ERP_moving a{ display: inline-block; text-align: center; width: 96px; height: 26px; line-height: 26px; color: #FFFFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #B8CBED; margin: 0 14px 0 8px; } .ERP_moving a:hover{ background-color: #4895FF; } </style> </head> <body> <dl class="goal_item"> <dt>采購計划單</dt> <dd> <ul class="goal_item_ul"> <li class="ERP_moving"><a href="javascript:void(0)">測試保留</a></li> </ul> </dd> </dl> <!-- 此處用的jqGrid 具體的不寫了--> <table id="jqGrid"></table> <div id="jqGridPager"></div> <script> $(function() { $("#jqGrid").find('tr').draggable( { addClasses: false, // axis: "x" , //約束在水平軸 (x) 或垂直軸 (y) 上拖拽。可能的值："x", "y"。 // cancel: ".title", //防止從指定的元素上開始拖拽。 // cursorAt: { left: 5 }, //設置拖拽助手（helper）相對於鼠標光標的偏移。坐標可通過一個或兩個鍵的組, { top, left, right, bottom }。 // delay: 300, 標按下后直到拖拽開始為止的時間,默認0 // disabled: true, //如果設置為 true，則禁用該 draggable。 // distance: 10, //鼠標按下后拖拽開始前必須移動的距離，以像素計。 // grid: [ 50, 20 ] }, //對齊拖拽助手（helper）到網格，每個 x 和 y 像素。數組形式必須是 [ x, y ]。 // handle: "h2", // 如果指定了該選項，則限制開始拖拽，除非鼠標在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允許被拖拽。 //opacity: 0.35, //當被拖拽時助手（helper）的不透明度。 //refreshPositions: true, //如果設置為 true，在每次鼠標移動（mousemove）時都會計算所有可放置的位置。 //revert: true, //當拖拽停止時，元素是否還原到它的開始位置。 //revertDuration: 200 , //還原（revert）動畫的持續時間，以毫秒計。如果 revert 選項是 false 則忽略。 //scope: "tasks" , //用於組合配套 draggable 和 droppable 項，除了 droppable 的 accept 選項之外。一個與 droppable 帶有相同的 scope 值的 draggable 會被該 droppable 接受。 //scroll: false , //如果設置為 true，當拖拽時容器會自動滾動。會出現滾動條 默認true // scrollSensitivity: 100, //窗口滾動距離 // scrollSpeed: 100 , //窗口滾動速度 // snap: true，//元素是否對齊到其他元素。 // snapMode: "inner" ,//決定 draggable 將對齊到對齊元素的哪個邊緣。如果 snap 選項是 false 則忽略。可能的值："inner"、"outer"、"both"。 // snapTolerance: 30, //從要發生對齊的對齊元素邊緣起的距離，以像素計。如果 snap 選項是 false 則忽略。 // stack: ".products" , //控制匹配選擇器（selector）的元素集合的 z-index，總是在當前拖拽項的前面，在類似窗口管理器這樣的事物中非常有用。 // zIndex: 100, //當被拖拽時，助手（helper）的 Z-index。 cursorAt: { top:8, left:48 }, iframeFix: true ,//防止拖拽期間 iframes 捕捉鼠標移動（mousemove ）事件 connectToSortable: ".goal_item_ul", //拖放到指定元素 containment: "window", //約束在指定元素或區域的邊界內拖拽。可能的值："parent"、"document"、"window"。 cursor: "move", //拖拽操作期間的 CSS 光標。 helper:"clone", //允許一個 helper 元素用於拖拽顯示。 original appendTo: "body", create: function( event, ui ) { }, //當 draggable 被創建時觸發。 drag: function( event, ui ) { // var b = $(this).find('.this_b').text(); // $('.ui-draggable-dragging').html('<li class="ERP_moving"><a href="javascript:void(0);">'+b+'</a></li>') }, //在拖拽期間當鼠標移動時觸發。 start: function( event, ui ) { var b = $(this).find('.this_b').text(); $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>') },//當拖拽開始時觸發。 stop: function( event, ui ) { //用戶ID var a = $(this).find('.this_a').text(); //用戶名稱 var b = $(this).find('.this_b').text(); //已有用戶 $('.goal_item_ul').each(function(ii,dd){ var item = $(dd).find('tr').siblings('li') item.each(function(i,d){ if($(d).text() == b && $(d).attr('data_id') == a){ $(d).remove() } }) }) $('.goal_item_ul').find("tr[role='row']").replaceWith('<li class="ERP_moving" data_id="'+a+'" ><a href="javascript:void(0);">'+b+'</a></li>'); $('.goal_item_ul').find('.ui-sortable-placeholder').html('<li class="ERP_moving" data_id="'+a+'"><a href="javascript:void(0);">'+b+'</a></li>'); $('.ui-sortable-helper').remove() setTimeout(function(){ $('.goal_item_ul').find('.ui-sortable-placeholder').remove() console.log('已刪除') },1200) },//當拖拽停止時觸發。 revert:"invalid" } ); $(".goal_item_ul").sortable( { revert: true }) $("ul, li").disableSelection(); } ); </script> </body> </html>
2.事件綁定
$("#jqGrid").on('mouseover','tr',function(){ $(this) .draggable( { addClasses: false, cursorAt: { top:8, left:48 }, iframeFix: true ,//防止拖拽期間 iframes 捕捉鼠標移動（mousemove ）事件 connectToSortable: ".goal_item_ul", //拖放到指定元素 containment: "window", //約束在指定元素或區域的邊界內拖拽。可能的值："parent"、"document"、"window"。 cursor: "move", //拖拽操作期間的 CSS 光標。 helper:"clone", //允許一個 helper 元素用於拖拽顯示。 original appendTo: "body", create: function( event, ui ) { }, //當 draggable 被創建時觸發。 drag: function( event, ui ) { // var b = $(this).find('.this_b').text(); // $('.ui-draggable-dragging').html('<li class="ERP_moving"><a href="javascript:void(0);">'+b+'</a></li>') }, //在拖拽期間當鼠標移動時觸發。 start: function( event, ui ) { var b = $(this).find('.this_b').text(); $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>') },//當拖拽開始時觸發。 stop: function( event, ui ) { //用戶ID var a = $(this).find('.this_a').text(); //用戶名稱 var b = $(this).find('.this_b').text(); //已有用戶 $('.goal_item_ul').each(function(ii,dd){ var item = $(dd).find('tr').siblings('li') item.each(function(i,d){ if($(d).text() == b && $(d).attr('data_id') == a){ $(d).remove() } }) }) $('.goal_item_ul').find("tr[role='row']").replaceWith('<li class="ERP_moving" data_id="'+a+'" ><a href="javascript:void(0);">'+b+'</a></li>'); // $('.goal_item_ul').find('tr').html('<li class="ERP_moving" data_id="'+a+'" ><a href="javascript:void(0);">'+b+'</a></li>'); $('.goal_item_ul').find('.ui-sortable-placeholder').html('<li class="ERP_moving" data_id="'+a+'"><a href="javascript:void(0);">'+b+'</a></li>'); $('.ui-sortable-helper').remove() setTimeout(function(){ $('.goal_item_ul').find('.ui-sortable-placeholder').remove() console.log('已刪除') },1200) },//當拖拽停止時觸發。 revert:"invalid" } ); })
$(".goal_item_ul").sortable( {
revert: true }) $("ul, li").disableSelection();
3.排序、放置、退拽等結合版
$("#jqGrid").on('mouseover','tr',function(){ $(this) .draggable( { addClasses: false, cursorAt: { top:8, left:48 }, delay: 0, //標按下后直到拖拽開始為止的時間,默認0 iframeFix: true ,//防止拖拽期間 iframes 捕捉鼠標移動（mousemove ）事件 containment: "window", //約束在指定元素或區域的邊界內拖拽。可能的值："parent"、"document"、"window"。 cursor: "move", //拖拽操作期間的 CSS 光標。 helper:"clone", //允許一個 helper 元素用於拖拽顯示。 original appendTo: "body", create: function( event, ui ) { }, //當 draggable 被創建時觸發。 drag: function( event, ui ) { }, //在拖拽期間當鼠標移動時觸發。 start: function( event, ui ) { var b = $(this).find('.this_b').text(); $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>') $(this).draggable( "disable" ); //禁用 draggable },//當拖拽開始時觸發。 stop: function( event, ui ) { $(this).draggable( "enable" ) //啟用 draggable }//當拖拽停止時觸發。 } ); }) $(".goal_item_ul").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var a = ui.draggable.find('.this_a').text() var b = ui.draggable.find('.this_b').text() var that =$(this) var item = $(this).find('li') var i_length = item.length if(item.length>0){ item.each(function(i,d){ if($(d).find('a').text() == b && $(d).find('a').attr('data_id') == a){ //有歷史數據，去重 return false; } else{ if(i==i_length-1){ //遍歷所有，保證沒重復的，創建新數據 $( '<li class="ERP_moving"><a href="javascript:void(0);" data_id='+a+'>'+b+'</a></li>').appendTo(that); return false; } } }) } else{ //最初始無數據，創建新數據 $( '<li class="ERP_moving "><a href="javascript:void(0);" data_id='+a+'>'+b+'</a></li>').appendTo(that); } } }).sortable({ items: "li:not(.placeholder)", sort: function() { // 獲取由 droppable 與 sortable 交互而加入的條目 // 使用 connectWithSortable 可以解決這個問題，但不允許您自定義 active/hoverClass 選項 $( this ).removeClass( "ui-state-default" ); } }); $("ul, li").disableSelection();