Because I want to use drag-and-drop forms, I personally prefer to do it myself and don’t like to use plug-ins without understanding the implementation or principles, so I found information to implement one.
Idea: Use mousedown to determine whether the mouse click position is at the trigger control. If so, when mousemove, clone a control, modify the transparency, and then when put into the container, remove the control, and generate a put into the container (the placed control and trigger control can be different)
Drag and drop: Similarly, when mousedown is used, determine which control it is. When mousemove, you need to put a placeholder div in the original position, and modify the transparency of the element and set it to absolute position to facilitate dragging. When dragging, the placeholder div will also change according to the mouse position (judging whether the current mouse position is the upper left corner of the control in the container plus half of the height of the control). When putting it down, the position of the placeholder div is used to insert it. Let’s look at the code in detail. The time added by this idea has been a bit long since the code was implemented. All may not be very accurate, but this is the general idea.
ps: If you want to use the drag and drop form function, you may basically have to change the previous design database method. Here we can provide you with a vertical storage of search keyword lists.
The comments have basically been written in detail, just put them on the code.
If you have any questions, please give me some advice.
<!DOCTYPE html><html> <head> <title>Test</title> <style type="text/css" > html,body { height:100%; width:100%; padding:0; margin:0; } .dialog { /* width:250px; height:250px;*/ position:absolute; background-color:#ccc; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; box-shadow:1px 1px 3px #292929; /*margin:10px;*/ top:50px; left: 50px; opacity:1; } .dialog-title { color:#ffff; background-color:#404040; font-size:12pt; font-weight:bold; padding:4px 6px; cursor:move; position:absolute; top:50px; left: 50px; } .dialog-content { padding:4px; cursor:move; } .none{ display: none; } .box{ width: 200px; height: 500px; background-color: gray; line-height: 30px; margin: 100px; } .place{ width: 200px; height: 50px; border: 1px dashed red; } </style> <script type="text/javascript" src="js/devWin.js"></script> </head> <body> <!-- <div id="dlgTest"> --> <div id = "title">Dialog</div> <div id = "title2" style ="top:10px">Dialog</div> <!-- </div> --> <a id = "a" href="#">123</a> <input id = "text" type="text" class = "none"> <div id = "box" class = "box"> <!-- <input type="" name="" placeholder=""> --> </div> <div class = "place"></div> </body> <script type="text/javascript"> //Variable to be passed in//Click to trigger the object var click = document.getElementById("title"); var click2 = document.getElementById("title2"); //The container placed var box = document.getElementById("box"); //The DIV var place in the container = document.createElement("div"); place.className = "place"; //The object added to the container var create = document.createElement("input"); create.type = "text"; var create2 = document.createElement("input"); create2.type = "password"; //Is it possible to add multiple vars isMany = true; createWin(click,create,isMany,place,box); createWin(click2,create2,isMany,place,box); </script></html> /*** author:lzh * Function: Drag-and-drop sorting form implementation* Parameters: oclick Click the object that triggers the event* ocreate the object passed in the form after departure* bisMany Can a single oclick object be dragged into multiple ocreate objects* placeholder div object when dragged in* obox The container dragged in, if not filled in, the default is body*/function createWin(oclick,ocreate,bisMany,place,obox=document.body){ //Whether the trigger object was clicked var isClick = false; //Whether the trigger object is an element in the container var isIncludeBox = false; space.style.width = obox.offsetWidth-5 + "px"; place.style.height = oclick.offsetHeight-5 + "px"; //Temporary element of the moving effect var oclickClone; var oclickDown; //Calculate the offset var diffObj; var diffX; var diffY; var tmp; var omove_position; //Is the point included in the container function isInclude(x,y,includeBox=obox) { if(x > includeBox.offsetLeft && y > includeBox.offsetTop && x < includeBox.offsetLeft + includeBox.offsetWidth && y < includeBox.offsetTop + includeBox.offsetHeight) return true; return false; } //Move effect function function moveMagic(omove,e) { // omove_position = window.getComputedStyle(omove).getPropertyValue('position'); omove.style.opacity = 0.4; omove.style.position = "absolute"; document.body.appendChild(omove); omove.style.left = e.clientX-diffX+"px"; omove.style.top = e.clientY-diffY+"px"; } function getdiff(e) { diffObj = e.target; diffX = e.clientX-diffObj.offsetLeft; diffY = e.clientY-diffObj.offsetTop; } //Mouse press event function down(e) { if(isInclude(e.clientX,e.clientY,oclick)) { isClick = true; //Clone the trigger node of the click oclickClone=oclick.cloneNode(true); //Calculate the offset of the mouse (if there is margin, there will be an offset) getdiff(e); } else { getdiff(e); var child = obox.childNodes; for(var i=0; i < child.length; i++) { //Judge whether the mouse click is an element in the container and cannot be a placeholder div (If you do not add this placeholder div, it will be a bug, but the specific reason is not known) if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != place) { isClick = true; isIncludeBox = true; //The effect of cloning element is used to drag oclickClone = child[i].cloneNode(true); //Clone element is used to put down oclickDown = child[i].cloneNode(true); // After pressing, delete the element and use the moving effect to display the element obox.removeChild(child[i]); moveMagic(oclickClone,e); // Insert the placeholder div to make obox.insertBefore(place,child[i]); // flag = true; break; } } } } } // Mouse movement event function move(e) { if(isClick) { moveMagic(oclickClone,e); // Determine whether the mouse has moved to the inside of the container if(isInclude(e.clientX,e.clientY,obox)) { // Calculate the child nodes in the container var child = obox.childNodes; //Once entering, you can insert the placeholder DIV in the first position obox.insertBefore(place,child[0]); //Place the placeholder DIV according to the mouse position for(var i = 0; i < child.length; i++) { //Because the placeholder DIV is unique, you only need to judge this way if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2) { //Judge whether to drag to the end if(i != child.length-1) obox.insertBefore(place,child[i+1]); else obox.appendChild(place); } } } } } //Mouse lift event function up(e) { isClick = false; //The mouse is raised and the temporary drag effect element can be deleted document.body.removeChild(oclickClone); //If the element is placed in the container if(isInclude(e.clientX,e.clientY)) { var child = obox.childNodes; //The position of the placeholder div var insertPlace; for(var i=0; i<child.length;i++) { //Determine the position of the placeholder div if(place === child[i]) { obox.removeChild(child[i]); insertPlace = i; break; } } //Judge whether multiple can be placed if(!bisMany) { if(isIncludeBox) ocreate = oclickDown; if(insertPlace==child.length) obox.appendChild(ocreate); else obox.insertBefore(ocreate,child[insertPlace]); } else { //You can place multiple can be placed, so you need to clone each if(isIncludeBox) var ocreateClone = oclickDown; else var ocreateClone = ocreate.cloneNode(true); if(insertPlace==child.length) obox.appendChild(ocreateClone); else { obox.insertBefore(ocreateClone,child[insertPlace]); } } } else { if(isIncludeBox) { var child = obox.childNodes; for(var i=0; i<child.length; i++) { if(child[i] === place) { obox.removeChild(child[i]); obox.insertBefore(oclickDown,child[i]); }1 } } } isIncludeBox = false; } document.addEventListener('mousemove',move); document.addEventListener('mousedown',down); document.addEventListener('mouseup',up);}The above simple example of pure JS implementation drag-and-drop forms is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.