关于Droppable的代码:
<style> .title{ margin-bottom:10px; } .dragitem{ border:1px solid #ccc; width:50px; height:50px; margin-bottom:10px; } .targetarea{ border:1px solid red; height:150px; } .proxy{ border:1px solid #ccc; width:80px; background:#fafafa; } .drag-item{ list-style-type:none; display:block; padding:5px; border:1px solid #ccc; margin:2px; width:300px; background:#fafafa; color:#444; } .indicator{ position:absolute; font-size:9px; width:10px; height:10px; display:none; color:red; } </style> <div style="float:left;width:150px;margin-right:20px;"> <div class="title">Source</div> <div> <div class="dragitem">Apple</div> <div class="dragitem">Peach</div> <div class="dragitem">Orange</div> </div> </div> <div style="float:left;width:200px;"> <div class="title">Target</div> <div class="easyui-droppable targetarea" data-options=""></div> </div> <div style="clear:both"></div> <div style="margin-bottom:20px;margin-top:20px;">Change Items Order</div> <ul style="margin-left:10px;"> <li class="drag-item">Drag 1</li> <li class="drag-item">Drag 2</li> <li class="drag-item">Drag 3</li> <li class="drag-item">Drag 4</li> <li class="drag-item">Drag 5</li> <li class="drag-item">Drag 6</li> </ul> <script> $(function(){ $('.dragitem').draggable({ revert:true, deltaX:10, deltaY:10, proxy:function(source){ var n = $('
'); n.html($(source).html()).appendTo($('#result')); return n; } }); $('.targetarea').droppable({ accept: '.dragitem,.drag-item', onDragEnter:function(e,source){ $(this).html('enter'); }, onDragLeave: function(e,source){ $(this).html('leave'); }, onDrop: function(e,source){ $(this).html($(source).html() + ' dropped'); } }) var indicator = $('
>>
').appendTo($('#result')); $('.drag-item').draggable({ revert:true, deltaX:0, deltaY:0 }).droppable({ accept: '.drag-item', onDragOver:function(e,source){ indicator.css({ display:'block', left:0, top:$(this).offset().top-$(this).outerHeight()*2 }); }, onDragLeave:function(e,source){ indicator.hide(); }, onDrop:function(e,source){ $(source).insertAfter(this); indicator.hide(); } }); }); </script>
渲染