マウスでドラッグアンドドロップする方法は？

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
\t <title>Drag & hhkhhDrop </title> 
 
\t <link rel="stylesheet" type="text/css" href="./Style.css" /> 
 

 

 
\t 
 
</head> 
 

 

 
<body> 
 

 
<h3>Moving words around to make a sentence</h3> 
 
<div id="answerDiv"> 
 
\t 
 
\t  <div class="dragDropSmallBox" class="destinationBox" id="a6">Page</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a1">THIS</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a5">Web</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a2">Is</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a4">Nice</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a3">A</div> 
 
\t \t 
 
\t \t 
 
\t </div> 
 

 
<div style="padding-top:280px;"> 
 
\t <div id="questionDiv"> 
 
\t \t 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q1">1</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q2">2</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q3">3</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q4">4</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q5">5</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q6">6</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t 
 
\t 
 
\t 
 
\t </div> 
 

 
\t 
 
\t 
 
\t </div> 
 
\t 
 
<div id="dragContent"></div> 
 
<input type="button" onclick="dragDropResetForm();return false" class="reset" value="Reset"> 
 
</body> 
 
</html>

私はすでにドラッグを持っており、ページ内の要素のための機能をドロップしますが、私は、マウスをクリックしますことを意味し、ドロップする別のクリックでドラッグ可能な要素を作りたい

要素をドラッグし、別のクリックをドロップしてドロップします。助けてください？

出典

2016-06-23 White Flower

このコードをすべて質問の質問にのみ追加できますか？ –

質問を更新しました –

JQueryUIには、draggableと呼ばれる素晴らしい組み込みメソッドがあります。それはあなたがドラッグし、ページ上のさまざまな要素を移動することができます。

ここでそれについての詳細を読む：あなたはこの単純な、まだエレガントなソリューションを試すことができますhttps://jqueryui.com/draggable/

出典

2016-06-24 05:15:55 Akjm

。ここで要素を削除するにはクリックを追加しなければなりません。

var dragContentDiv = document.getElementById('dragContent'); 

// Disable browser's drag and drop functionality 
dragContentDiv.ondragstart = function() { 
    return false; 
}; 

// Watch the mouse button press 
dragContentDiv.onmousedown = function(e) { 
    // Move the selected element to absolute coordinates 
    dragContentDiv.style.position = 'absolute'; 
    moveAt(e); 
    // If needed, move element to the body, so it's not inside of position:relative block 
    document.body.appendChild(dragContentDiv); 

    // Show dragContentDiv above all other elements 
    dragContentDiv.style.zIndex = 1000; // показывать мяч над другими элементами 

    // Move element horisontally under cursor coordinates 
    // and move it halfway of it's width to make it centered 
    function moveAt(e) { 
    dragContentDiv.style.left = e.pageX - dragContentDiv.offsetWidth/2 + 'px'; 
    } 

    // Move it around the screen 
    document.onmousemove = function(e) { 
    moveAt(e); 
    } 

    // Watch the end of a process 
    dragContentDiv.onmouseup = function() { 
    document.onmousemove = null; 
    dragContentDiv.onmouseup = null; 
    } 
}

出典

2016-06-24 05:29:05 Andrii

マウスでドラッグアンドドロップする方法は？

答えて

関連する問題