// 做学习参考的话，重点看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();