移動容器並將所有孩子移入其中

Question

我無法正確地將“父親”框拖到頁面上的另一點。 如果我不e.preventDefault ，則瀏覽器將通過移動元素而無需重新創建其他容器來忽略范圍上的方向。 我需要能夠正確移動容器。父親，我該怎么辦？ 現場代碼在這里。

 var span; var clone; var id; window.onload = function() { id = document.getElementsByClassName('father')[0]; var b = document.body; id.addEventListener("dragstart", dragStart, false); id.addEventListener("dragend", dragEnd, false); b.addEventListener('drop', function(event) { dropp(event) }, false); } function dragStart() { span = document.getElementsByClassName('father')[0]; clone = span.cloneNode(true); } function dragEnd() { if (document.getSelection) { range = window.getSelection().getRangeAt(0); range.insertNode(clone); } } function dropp(e) { e.preventDefault(); }

 <body contenteditable="true"> <p> first paragraph </p> <p> second paragraph <span class="father"> <img id="first-child" src="http://www.telegraph.co.uk/content/dam/Travel/Destinations/Africa/Mauritius/Mauritius---Beaches---Tropical-beach-large.jpg" width="200" height="auto"> <span id="second-child" style="color:red;">Text</span> </span> </p> </body>

Answer 1

你可以試試看 效果很好...請檢查是否對您有幫助。

  var makeMove; x0=0; y0=0; function move(e){ if(makeMove){ x1 = e.clientX; y1 = e.clientY; cx=x0+x1-x; cy=y0+y1-y; document.getElementById("main").style.left = cx +"px"; document.getElementById("main").style.top = cy +"px"; e.preventDefault(); } } function mouseUp(e){ makeMove=false; x0=cx; y0=cy; } function mouseDown(e){ makeMove=true; x = e.clientX; y = e.clientY; }

 <body contenteditable="true"> <p> first paragraph </p> <p onmousemove="move(event)" onmouseup="mouseUp(event)" onmousedown="mouseDown(event)"> second paragraph <span class="father" id="main" style="position:relative;"> <img id="first-child" src="http://www.telegraph.co.uk/content/dam/Travel/Destinations/Africa/Mauritius/Mauritius---Beaches---Tropical-beach-large.jpg" width="200" height="auto"> <span id="second-child" style="color:red;">Text</span> </span> </p> </body>

移動容器並將所有孩子移入其中

問題描述

1 個解決方案

解決方案1
0 2017-07-02 16:38:06

移動容器並將所有孩子移入其中

問題描述

1 個解決方案

解決方案1 0 2017-07-02 16:38:06

解決方案1
0 2017-07-02 16:38:06