EasyUI中放置Droppable的使用以及实现拖拽排序
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中放置Droppable的使用以及实现拖拽排序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
實現
webapp下新建droppable文件夾，在其下新建basic.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>可放置</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <style type="text/css">.drags{width:50px;hejght:50px;margin:5px;border:1px solid #ccc;}.container, #drop{width:300px;height:300px;border:1px solid #ccc;float:left;margin:5px;} </style> <!--可拖拽元素--> <div class="container"><div class="drags" id="drag1">drag1</div><div class="drags" id="drag2">drag2</div><div class="drags" id="drag3">drag3</div> </div> <!--放置的目的容器--> <div id="drop"> </div> <script type="text/javascript">$(".drags").draggable({//拖拽時產生克隆對象proxy:"clone",//松開后返回原地revert:true});//設置為可放置$("#drop").droppable({//設置可接受的accept:"#drag1,#drag2",onDragEnter:function (e,source) {//變成小手$(source).draggable("options").cursor="pointer";$(source).draggable("proxy").css("border","1px solid red");},onDragLeave:function (e,source) {//變成不可放置$(source).draggable("options").cursor="no-drop";$(source).draggable("proxy").css("border","1px solid #ccc");},onDrop:function (e,source) {$(this).append(source);}}) </script></body> </html>拖拽排序實現
效果
新建sort.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>拖動排序</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul style="margin:0;padding:0;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> <style type="text/css">.drag-item{list-style-type:none;display:block;padding:5px;border:1px solid #ccc;margin:2px;width:300px;background: #fafafa;}.indicator{position: absolute;font-size:9px;width:10px;height:10px;display:none;color:red;} </style> <script type="text/javascript">//構造箭頭對象，即兩個>var indicator=$("<div class='indicator'>>></div>").appendTo("body");$(function () {//設置可拖拽并設置松開時返回原位置$(".drag-item").draggable({revert:true}).droppable({//設置可放置//拖拽時顯示箭頭onDragOver:function (e,source) {indicator.css({display:"block",//當前元素舉例左邊的距離-10left:$(this).offset().left-10,//當前元素距離頂部的舉例+當前元素的高度-5top:$(this).offset().top+$(this).outerHeight()-5});},//設置拖拽離開時箭頭消息onDragLeave:function (e,source) {indicator.hide();},//放下時將拖拽的元素放在當前元素之后并隱藏箭頭onDrop:function (e,source) {$(source).insertAfter(this);indicator.hide();}})}) </script> </body> </html>?
總結
以上是生活随笔為你收集整理的EasyUI中放置Droppable的使用以及实现拖拽排序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JsTree中提示：Cannot rea
- 下一篇： EasyUI中搜索框的简单使用