Поскольку я хочу использовать формы перетаскивания, я лично предпочитаю делать это сам и не люблю использовать плагины, не понимая реализацию или принципы, поэтому я нашел информацию для ее реализации.
Идея: Используйте Mousedown, чтобы определить, находится ли позиция щелчка мыши под управлением триггера. Если это так, при MouseMove, клонируйте управление, изменяйте прозрачность, а затем при помещении в контейнер удалите управление и генерируйте пут в контейнер (управление размещенным управлением и управлением триггером могут быть разными)
Перетаскивание: Аналогично, когда используется Mousedown, определите, какой это управление. При MouseMove вам необходимо поместить DIV заполнителя в исходную позицию, изменить прозрачность элемента и установить его в абсолютное положение для облегчения перетаскивания. При перетаскивании DIV заполнителя также будет изменяться в соответствии с положением мыши (оценивая, является ли нынешнее положение мыши верхним левым углом управления в контейнере плюс половина высоты контроля). При его откладывании позиция Div заполнителя используется для его вставки. Давайте подробно рассмотрим код. Время, добавленное этой идеей, было немного давно с тех пор, как был реализован код. Все может быть не очень точным, но это общая идея.
PS: Если вы хотите использовать функцию формы перетаскивания, вам, возможно, придется изменить предыдущий метод базы данных дизайна. Здесь мы можем предоставить вам вертикальное хранилище списков ключевых слов поиска.
Комментарии были в основном написаны подробно, просто поместите их в код.
Если у вас есть какие -либо вопросы, пожалуйста, дайте мне несколько советов.
<! Doctype html> <html> <head> <title> test </title> <style type = "text/css"> html, body {height: 100%; Ширина: 100%; Заполнение: 0; поля: 0; } .dialog { /* width: 250px; Высота: 250px;*/ позиция: абсолют; фоновый цвет: #CCC; -Webkit-box-shadow: 1px 1px 3px #292929; -Моз-бокс-тень: 1px 1px 3px #292929; Box-Shadow: 1px 1px 3px #292929; /*Маржа: 10px;*/ top: 50px; Слева: 50px; непрозрачность: 1; } .dialog-title {color: #ffff; фоновый цвет:#404040; размер шрифта: 12pt; шрифт-вес: жирный шрифт; Заполнение: 4px 6px; курсор: двигаться; позиция: абсолютно; Верх: 50px; Слева: 50px; } .dialog-content {padding: 4px; курсор: двигаться; } .none {display: none; } .box {width: 200px; Высота: 500px; фоновый цвет: серый; высота линии: 30px; Полевая: 100px; }. Place {width: 200px; Высота: 50px; Граница: 1px пунктир красный; } </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 = "" waceholder = "">-> </div> <div class = "place"> </div> </body type = type = javascript '>/variber variber varible "/variggible click = document.getElementById ("TITE"); var click2 = document.getElementbyId ("title2"); // контейнер размещен var box = document.getElementbyid ("box"); // место место div var в контейнере = document.createElement ("div"); place.classname = "place"; // объект, добавленный в контейнер var create = document.createElement ("input"); create.type = "text"; var create2 = document.createElement ("input"); create2.type = "пароль"; // можно ли добавить несколько vars ismany = true; CreateWin (щелкните, создать, исмани, место, поле); CreateWin (Click2, Create2, Ismany, Place, Box); </script> </html> /*** Автор: LZH* Функция: Реализация формы сортировки перетаскивания* Параметры: oclick Нажмите на объект, который запускает событие. CreateWin (Oclick, Ocreate, Bismany, Place, obox = document.body) {// был ли нажал на триггер объект var isclick = false; // является ли триггерный объект элементом в контейнере var isincludebox = false; Space.Style.width = obox.OffSetWidth-5 + "px"; Place.style.height = oclick.offsetheight-5 + "px"; // временный элемент движущегося эффекта var oclickclone; var oclickdown; // Рассчитать смещение 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; вернуть ложь; } // Перемещение функции функции эффекта 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; } // Функция события нажатия мыши вниз (e) {if (isinclude (e.clientx, e.clienty, oclick)) {isclick = true; // клонировать триггерный узел Click oclickclone = oclick.clonenode (true); // Рассчитать смещение мыши (если есть маржа, будет смещенное) getDiff (e); } else {getDiff (e); var Child = obox.ChildNodes; Для (var i = 0; i <child.length; i ++) {// Судья, является ли щелчок мыши элементом в контейнере и не может быть заполнителем div (если вы не добавите этот Div заполнителя, это будет ошибка, но конкретная причина не известна), если (isinclude (e.clientx, e.clienty, child [i]) && gild [i]! isincludebox = true; // Эффект элемента клонирования используется для перетаскивания oclickclone = Child [i] .clonenode (true); // элемент клона используется для подавления Oclickdown = Child [i] .clonenode (true); // после нажатия удалите элемент и используйте движущийся эффект, чтобы отобразить элемент obox.removechild (Child [i]); Movemagic (Oclickclone, E); // вставить Div заполнителя, чтобы сделать Obox.InsertBefore (место, ребенок [i]); // flag = true; перерыв; }}}}} // Функция события движения мыши перемещение (e) {if (isclick) {movemagic (oclickclone, e); // Определите, перейти ли мышь в внутреннюю часть контейнера, если (isinclude (e.clientx, e.clienty, obox)) {// Рассчитать дочерние узлы в контейнере var gut = obox.childnodes; // После входа вы можете вставить Div заполнителя в первую позицию obox.insertbefore (место, ребенок [0]); // Поместите Div заполнителя в соответствии с позицией мыши для (var i = 0; i <child.length; i ++) {// Поскольку Div заполнителя уникальна, вам нужно только судить по этому пути, если (e.clienty> child [i] .OffSettop+child [i]. obox.insertbefore (место, ребенок [i+1]); else obox.appendchild (место); }}}}} // Функция события подъема мыши вверх (e) {isclick = false; // мышь поднимается, а элемент временного эффекта сопротивления может быть удален документ. // Если элемент помещается в контейнер, если (isinclude (e.clientx, e.clienty)) {var child = obox.childnodes; // положение заполнителя div var insertplace; for (var i = 0; i <child.length; i ++) {// определить положение заполнителя div if (место === child [i]) {obox.removechild (child [i]); INSERTPLOSE = I; перерыв; }} // судить, можно ли быть размещено несколько, если (! Bismany) {if (iSincludebox) ocreate = oclickdown; if (insertplace == child.length) obox.appendchild (ocreate); else obox.insertbefore (ocreate, ребенок [вставка]); } else {// Вы можете разместить несколько, можно размещать, поэтому вам нужно клонировать каждый if (isincludebox) var ocreateclone = oclickdown; else var ocreateclone = ocreate.clonenode (true); if (insertplace == child.length) obox.appendchild (ocreateclone); else {obox.insertbefore (ocreateclone, ребенок [insertplace]); }}} else {if (isincludebox) {var Child = obox.childnodes; for (var i = 0; i <child.length; i ++) {if (kild [i] === place) {obox.removeChild (Child [i]); obox.insertbefore (oclickdown, ребенок [i]); } 1}}} isincludebox = false; } document.AddeventListener ('MouseMove', Move); document.addeventlistener ('mousedown', down); document.addeventlistener ('mouseup', up);}Приведенный выше простой пример чистого реализации JS-обработки-это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.