// 做学习参考的话，重点看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();
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
