コンテナとその中のすべての子を移動する

「父」ボックスをページの別の場所に適切にドラッグできません。 e.preventDefaultをオンにしないと、ブラウザは別のコンテナを再作成せずに要素を移動することで、範囲の指示を無視します。容器を正しく動かす必要があります。父、どうすればいいですか？ライブコードはhereです。コンテナとその中のすべての子を移動する

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"> 
 
\t \t \t <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"> 
 
\t \t \t <span id="second-child" style="color:red;">Text</span> 
 
    </span> 
 
    </p> 
 
</body>

出典

2017-07-02 User

あなたはこれを試すことができます。これは正常に動作します...

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

<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>

は、このソリューションは、私の場合には動作しないことができ

出典

2017-07-02 16:38:06 Goofy

...それはあなたのために有用であるかどうかを確認します。私は、テキストに従うことによって、コンテナを移動する必要があり、それがなければなりませんテキストの一部。 – User

コンテナとその中のすべての子を移動する

答えて

関連する問題