在项目中要用到拖动效果，之前写了一点不够完善，今天做了一点优化，在以前的基础上可以相互拖动了，改动的地方不大，但为了不影响之前的效果，我还是重新记录一下.
HTML和我之前记录的文章一样，我就不重复了。。。
以下是js:
var targetFlag=false;//判断从框中拖出去是否拖到了另一个框 $('.items li').draggable({ proxy: 'clone', revert: true }); // 级联统计指标放置区 $('.target-cascade').droppable({ onDragEnter: function(e,source){ $(this).css('border','1px solid red'); }, onDragLeave: function(e,source){ $(this).css('border','1px solid #ddd'); }, onDrop: function(e,source){ // 判断拖动的元素是否存在于放置区内 var buttonName=""; if($(source).draggable('options').proxy === 'clone') {//判断是否是克隆元素，即判断是否是从另一个框中拖过来的元素 // 禁用拖动 NotDrag(source); // 将拖入元素的原位置记录下来 var buttonName = $(source).find('span').html(); }else { buttonName = $(source).html(); targetFlag = true; } var Ele = $('<li class='+ $(source)[0].className +'><button class='+ $(source)[0].className +'>'+ buttonName +'</button></li>'); Ele.appendTo('.target-cascade ul'); $(this).css('border','1px solid #ddd'); // 拖动放置区内的元素 $(this).find('button').draggable({ revert: true, onStopDrag: function(e){ var _indexClass = $(this).attr("class"); $(this).parents("li").remove(); if(targetFlag==false){ $('.items li[class='+_indexClass+']').draggable('enable'); $('.items li[class='+_indexClass+']').find('i').css('backgroundColor','#FF34B3'); }else{ targetFlag=false; } } }); } }); // 列指标放置区 $('.target-column').droppable({ onDragEnter: function(e,source){ $(this).css('border','1px solid red'); }, onDragLeave: function(e,source){ $(this).css('border','1px solid #ddd'); }, onDrop: function(e,source){ // 判断拖动的元素是否存在于放置区内 var buttonName="",className=""; if($(source).draggable('options').proxy === 'clone') { // 禁用拖动 NotDrag(source); buttonName = $(source).find('span').html(); }else { buttonName = $(source).html(); targetFlag=$(source); } className=$(source)[0].className; var Ele = $('<li class='+className +'><button class='+className +'>'+ buttonName +'</button><select class="'+ className +'"><option value ="show">显示</option>'+ '<option value ="sum">求和</option><option value ="count">计数</option></select></li>'); Ele.appendTo('.target-column ul'); $(this).css('border','1px solid #ddd'); // 拖动放置区内的元素 $(this).find('button').draggable({ revert: true, onDrag: function(e){ $(this).siblings('select').hide(); }, onStopDrag: function(e){ var _indexClass = $(this).attr("class"); $(this).parents("li").remove(); if(targetFlag==false){ $('.items li[class='+_indexClass+']').draggable('enable'); $('.items li[class='+_indexClass+']').find('i').css('backgroundColor','#FF34B3'); }else{ targetFlag=false; } } }); } }); 这里有一点和之前的发生了改变，记录元素位置时这里使用了元素的class,以前使用的是相对于其他元素的index值，over!!