Wie man ein div auf einem anderen div ziehen kann?

Ich muss ein div über das andere div schleppbar machen. Wie macht man das ?Wie man ein div auf einem anderen div ziehen kann?

Das ist mein html und ich habe diese ansprechende Medien Abfrage

<style> 
    .text-canvas{ 
     z-index:1; 
     position:absolute; 
    } 
    .imageupload{ 
     z-index:-1; 
    } 
</style> 

<script> 
    function submit_button(){ 
    alert('hiii'); 
    } 

</script> 
<div class="parent-canvas"> 
     <div class="text-canvas" contenteditable="true"> 
     my text 
    </div> 
    <div class="image-canvas"> 
     <div class="imageupload" onclick="submit_button()"> 
      <img src="img.png"> 
     </div> 

    </div> 
</div>

mit

Hier muss ich diesen Text-Leinwand div dragabble machen, so kann dieser Benutzer ziehen, dass mein Text und er es auf eine beliebige Stelle können wo im Bild (nur im Bild-Canvas div). Ich sehe das html Drag and Drop, aber ich habe nicht verstanden, wie man das anwendet.

Quelle

2016-10-19 Anonymous

Basierend auf Ihren html: Dieses Skript

$(".text-canvas"").draggable({ 
    containment: ".imageupload" 
});

Für alle Zweifel in der Syntax oder diese Dokumente

(1) http://api.jqueryui.com/draggable/

(2) https://jqueryui.com/draggable/

Stellen Sie sicher, bereits enthalten jquery-ui.js Arbeit überprüfen. Zuerst müssen Sie jquery.js oder jquery.min.js aufrufen und dann nur jquery-ui.js aufrufen, die Reihenfolge ist wichtig. zB

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Quelle

2016-10-19 08:07:33 Nithin

Ziele für ziehbare Elemente erstellen.Ein beliebiges DOM-Element, das ausgelöst werden kann, ein Ziel für ziehbare Elemente.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 


</body> 
</html>

Die jQuery UI Dropfähig Plugin macht Elemente abwerfbaren ausgewählt (das heißt, sie durch draggables fiel auf accept wird). Sie können angeben, welche Zugrahmen jeweils akzeptiert werden.

Theming

Die abwerfbaren Widget verwendet die jQuery UI-CSS-Framework sein Aussehen, Stil und Gefühl. Wenn ein spezifizierbares Aussehen für das Ablegen erforderlich ist, können die folgenden CSS-Klassennamen für Überschreibungen oder als Schlüssel für die Klassenoption verwendet werden:

ui-droppable: Das drop-fähige Element. Wenn ein ziehbares Objekt, das auf dieses Ausgabefach fallen gelassen werden kann, aktiviert wird, wird die Klasse ui-droppable-active hinzugefügt. Wenn Sie ein ziehbares Objekt über dieses Objekt ziehen, wird die Klasse "ui-droppable-hover" hinzugefügt.

Link https://jqueryui.com/droppable/

Quelle

2016-10-19 06:36:33

Siehe Ziehbare Beispiel von jQuery UI here

Quelle

2016-10-19 06:36:53

Check Out HTML5 Drag & Drop

HTML5 Drag & Drop

Quelle

2016-10-19 06:39:34