ドラッグアンドドロップフォームを使用したいので、個人的に自分でやりたいと思っており、実装や原則を理解せずにプラグインを使用することを好まないので、実装する情報を見つけました。
アイデア： Mousedownを使用して、マウスクリックの位置がトリガーコントロールにあるかどうかを判断します。その場合、Mousemoveの場合、コントロールをクローンし、透明度を変更し、コンテナに入れたときにコントロールを取り外し、コンテナに入力します（配置されたコントロールとトリガーコントロールは異なる場合があります）
ドラッグアンドドロップ：同様に、ムーズダウンが使用されるとき、それがどの制御であるかを決定します。 Mousemoveの場合、プレースホルダーDIVを元の位置に配置し、要素の透明度を変更し、ドラッグを容易にするために絶対位置に設定する必要があります。ドラッグすると、プレースホルダーdivもマウスの位置に応じて変更されます（現在のマウスの位置がコンテナのコントロールの左上隅で、コントロールの高さの半分であるかどうかを判断します）。置くと、プレースホルダーdivの位置を使用して挿入します。コードを詳細に見てみましょう。このアイデアによって追加された時間は、コードが実装されてから少しかかりました。すべてがそれほど正確ではないかもしれませんが、これは一般的なアイデアです。
PS：ドラッグアンドドロップフォーム機能を使用する場合は、基本的に以前の設計データベースメソッドを変更する必要がある場合があります。ここでは、検索キーワードリストの垂直ストレージを提供できます。
コメントは基本的に詳細に書かれており、コードに載せるだけです。
ご質問がある場合は、アドバイスをお願いします。
<！doctype html> <html> <head> <title>テスト</title> <style type = "text/css"> html、body {height：100％;幅：100％;パディング：0;マージン：0; } .dialog { /* width：250px;高さ：250px;*/位置：絶対;バックグラウンドカラー：#ccc; -webkit-box-shadow：1px 1px 3px＃292929; -moz-box-shadow：1px 1px 3px＃292929; Box-Shadow：1PX 1PX 3PX＃292929; /*マージン：10px;*/ top：50px;左：50px;不透明：1; } .dialog-title {color：#ffff;バックグラウンドカラー：＃404040;フォントサイズ：12pt; font-weight：bold;パディング：4px 6px;カーソル：移動;位置：絶対;トップ：50px;左：50px; } .dialog-content {padding：4px;カーソル：移動; } .none {display：none; } .box {width：200px;高さ：500px;背景色：灰色; Line-Height：30px;マージン：100px; } .place {width：200px;高さ：50px;境界線：1pxダッシュレッド。 } </style> <script type = "text/javascript" src = "js/devwin.js"> </script> </head> <body> <！ - <div id = "dlgtest"> - > <div id = "> dialog </div> <div id =" title2 "style =" </divid "> divid"> divid " href = "＃"> 123 </a> <入力id = "text" type = "text" class = "none"> <div id = "box" class = "box"> <！ - <input type = "" name = "" placeholder = ""> - > </div> <div class = "place"> </div> </body = "> javascript"> javascript " var click = document.getElementById（ "title"）; var click2 = document.getElementById（ "title2"）; //コンテナ配置var box = document.getElementById（ "box"）; // div var place in the container = document.createelement（ "div"）; place.classname = "place"; //コンテナに追加されたオブジェクトvar create = document.createelement（ "input"）; create.type = "text"; var create2 = document.createelement（ "input"）; create2.type = "password"; //複数のvarsを追加することは可能ですか？ismany = true; createwin（クリック、作成、イスマニー、場所、ボックス）; createwin（click2、create2、ismany、place、box）; </script> </html> /***著者：LZH*機能：ドラッグアンドドロップソートフォーム実装*パラメーター：oclick oclickイベントをトリガーするオブジェクトをクリックします*出発後にフォームで渡されたオブジェクトをクリックします*ビスマニーは、単一のoclickオブジェクトを複数のocreateオブジェクトにドラッグできます*プレースホルダーdivオブジェクトは、容器をドラッグしたときにドラッグされます。 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; //コンテナ関数に含まれるポイントは、（x、y、includebox = obox）{if（x> incompox.offsetLeft && y> inclute.offsettop && x <incompbox.offsetLeft + incompox.offsetwidth && y <incribsbox.offsettop + incompbox.offbox.offsetheigh）true; falseを返します。 } //効果関数の移動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"; }関数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; //クリックのトリガーノードをクリックしますoclickclone = oclick.cloneNode（true）; //マウスのオフセットを計算します（マージンがある場合、オフセットがあります）getDiff（e）; } else {getDiff（e）; var child = obox.childnodes; for（var i = 0; i <child.length; i ++）{//マウスクリックがコンテナ内の要素であり、プレースホルダーdivにならないかどうかを判断します（このプレースホルダーdivを追加しない場合、特定の理由は不明ですが、isinclude（e.clientx、e.clienty、child = place click！ isincludebox = true; //クローニング要素の効果は、oclickclone = child [i] .clonenode（true）をドラッグするために使用されます。 //クローン要素は、oclickdown = child [i] .clonenode（true）を下げるために使用されます。 //押した後、要素を削除し、移動効果を使用して要素obox.RemoveChild（child [i]）を表示します。 movemagic（oclickclone、e）; //プレースホルダーdivを挿入してobox.insertbefore（place、child [i]）; // flag = true;壊す; }}}}}} //マウスの動きイベント機能ムーブ（e）{if（isclick）{movemagic（oclickclone、e）; //マウスがコンテナの内側に移動したかどうかを判断します。 //入力したら、プレースホルダーdivを最初の位置に挿入できます。 //（var i = 0; i <child.length; i ++）{//プレースホルダーdivのマウスの位置に従ってプレースホルダーdivを配置します。 obox.insertbefore（place、child [i+1]）; else obox.appendchild（place）; }}}}}} //マウスリフトイベント機能アップ（e）{isclick = false; //マウスが上昇し、一時的なドラッグ効果要素を削除することができます。 //要素がコンテナに配置されている場合、if（isinclude（e.clientx、e.clienty））{var child = obox.childnodes; //プレースホルダーdiv var insertplaceの位置。 for（var i = 0; i <child.length; i ++）{//プレースホルダーdivの位置を決定するif（place === child [i]）{obox.removechild（child [i]）; insertplace = i;壊す; }} //倍数を配置できるかどうかを判断します（！bismany）{if（isincludebox）ocreate = oclickdown; if（insertplace == child.length）obox.appendchild（ocreate）; else obox.insertbefore（ocreate、child [insertplace]）; } else {//配置できます。したがって、それぞれ（isincludebox）var ocreateclone = oclickdown;それ以外の場合、var ocreateclone = ocreate.cloneNode（true）; if（insertplace == child.length）obox.appendchild（ocreateclone）; else {obox.insertbefore（ocreateclone、child [insertsplace]）; }}} 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）;}純粋なJS実装のドラッグアンドドロップフォームの上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。