Wie n Drop mit der Maus ziehen?

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

ich bereits eine Drag haben und Funktion für die Elemente auf der Seite fallen, aber ich möchte die Elemente ziehbar mit einem separaten Klick machen fallen zu lassen, das heißt, ich auf der Maus klicken möchten Ziehen Sie das Element und einen weiteren Klick, um es dort abzulegen, wo es abgelegt werden soll. Irgendwelche Hilfe bitte?

Quelle

2016-06-23 White Flower

Kannst du entweder eine funktionierende Geige hinzufügen oder den ganzen Code verkleinern, um nur die Frage zu stellen? –

Ich habe die Frage aktualisiert –

JQueryUI hat eine schöne eingebaute Methode namens ziehbare. Sie können verschiedene Elemente auf der Seite ziehen und verschieben.

Lesen Sie mehr darüber hier: https://jqueryui.com/draggable/

Quelle

2016-06-24 05:15:55 Akjm

Sie diese einfach versuchen können, dennoch elegante Lösung. Hier müssen Sie zusätzliche klicken, um das Element zu löschen.

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

Quelle

2016-06-24 05:29:05 Andrii

Wie n Drop mit der Maus ziehen?

Antwort

Verwandte Themen