Easyui draggable Components use:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Scriptsrc= "Easyui/jquery.min.js"></Script> <Scriptsrc= "Easyui/jquery.easyui.min.js"></Script> <Scriptsrc= "Easyui/locale/easyui-lang-zh_cn.js"></Script> <Scriptsrc= "Js/test003.js"></Script> <Linkrel= "stylesheet"href= "Easyui/themes/default/easyui.css"> <Linkrel= "stylesheet"href= "Easyui/themes/icon.css"></Head><Body> <DivID= "Box1"class= "Easyui-draggable"style= "background: #ccc; width:300px;height:200px">This is draggable</Div> <DivID= "box"style= "background: #eee; width:300px;height:200px"><DivID= "pox">Title</Div>This is JS draggable</Div></Body></HTML>
$(function(argument) {varobj = { //Revert:true,//true means return to the initial position //cursor: ' text ',//The way the mouse looks in the process of moving //handle: ' #pox ',//the part that can be dragged, usually in the title layer inside //the disabled:true,//is forbidden to drag; //edge:10,//the width of the edges to prohibit dragging; //axis: ' h ',//v-can only be dragged vertically, h can only be dragged horizontallyProxy: ' Clone ',//cloning an object during drag //deltax:10,//Drag an object with its X offset relative to the mouse, used in conjunction with proxy //deltay:10,//The object that is dragged relative to the Y offset of the mouse, used in conjunction with proxy //proxy:function (source) { //Console.log (source);//source is the dragged HTML object; //var p = $ (' <div style= "border:1px solid #ccc; width:80px" ></div> "); //p.html (source). HTML ()). AppendTo (' body '); //return p;//p is the generated object, dragging the one that goes; // },Onbeforedrag:function(e) {//corresponding MouseDown eventsConsole.log (' Onbeforedrag '); Console.log (e); //return false;//will cancel the drag;}, Onstartdrag:function(e) {//corresponding MouseDown eventsConsole.log (' Onstartdrag '); Console.log (e); }, Ondrag:function(e) {//corresponds to MouseMove and MouseUp events //console.log (' Ondrag '); //Console.log (e); //return false;//is not moving, but can reach the target position; //Console.log ($ (' #box '). draggable (' options '));//Get Options Properties //Console.log ($ (' #box '). Draggable (' proxy '));//Get proxy object; //$ (' #box '). Draggable (' disable ');//!! Can not write like this, will collapse;}, Onstopdrag:function(e) {//corresponding MouseUp eventsConsole.log (' Onstopdrag '); Console.log (e); } }; $(' #box '). draggable (obj);}); $(' #box '). Draggable (' disable ');//It seems to have no effect!
Easyui draggable Components use
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
