Structure-behavior-style-jqueryui Drag-and-drop Usage Example (full)

recently, there is a need for a dynamic configuration page, think of the company has done similar, with the jqueryui, so I looked at its api. Here is my little demo, want to use the classmate can refer to:

Html:

       <Divclass= "page-component">            <Divclass= "pct-content">                <Divclass= "btn Btn-default special"ID= "one" >I am an object that can be dragged</Div>            </Div>        </Div>        <DivID= "dropzone"class= "dropzone"></Div>

Js:

$(  $("#dropzone"). droppable ({scope:"tasks",//field, Drag the field to drag and drop the same field can be put inAccept: ". special",//the classes to be accepted in the drag objectTolerance: "fit",//When the element is dragged and dropped into the droppable area, fit is all entered intoDropfunction(event,ui) {//put, The callback function of this action                        varUID = ui.draggable[0].id; varDropzone = $ ("#dropzone"). Offset ();//get the absolute position of the relative drop area                        varOleft = ui.position.left-dropzone.left;//get the absolute position of the relative drop area                        varOtop = ui.position.top-dropzone.top;//get the absolute position of the relative drop area$( this). Append ($ ("<div class= ' cloneele ' style= ' left:" +oleft+ "px;top:" +otop+ "px; ' ><a href= ' javascript:; ' class= ' close ' ><i class= ' Glyphicon glyphicon-remove ' ></i></a> </div> ')); $(". cloneele"). draggable ({opacity:0.35, Revert:function(a) {//controls the elements that have been dragged into the drop area and can only be dragged in the drop area                                varc = $ ( this) [0]; vart =c.style; varD = $ ("#dropzone") [0]; varCH =d.clientheight; varCW =d.clientwidth; varNum_left = parsefloat (t.left.split ("px") [0]); varNum_top = parsefloat (t.top.split ("px") [0]); if(num_left<0 | | num_left + C.CLIENTWIDTH-CW > 0 | | num_top < 0 | | num_top + C.CLIENTHEIGHT-CH > 0 ){                                    return true; }Else{                                    return false; }}, snap:true,//Automatic AdsorptionCursor: "pointer"//Drag the mouse pointer}). resizable (); //Remove the element that is added into the drop area$ (". dropzone. close"). bind (' Click ',function(){                            $( this). Parent (). Remove ();                        }); //Drag once the element can no longer be dragged$ ("#" +uid). draggable ("option", "disabled",true );                }                }); $(". special"). draggable ({helper:"clone",//set Drag type to cloneopacity:0.35,//Drag the transparency of an objectSnaptrue,//Automatic AdsorptionCursor: "pointer",//Drag the mouse pointerAppendTo: "body", Scope:"tasks"//field, Drag the field to drag and drop the same field can be put in                }); );

Structure-behavior-style-jqueryui Drag-and-drop Usage Example (full)