Drag und Einfügen von Div in ein anderes Div

Ich versuche, ein Feature zu entwerfen, das ziehen und Einfügen eines Div in ein anderes Div.Drag und Einfügen von Div in ein anderes Div

Zum Beispiel:

<div id="1"> </div> <div id="2"> </div>

i # 1 ziehbar machen will (ich weiß, es kann mit jQuery getan werden, so ziehbar nicht Teil meiner Frage ist), und ziehen Sie # 1 über # 2 und wenn mouseup, # 2 in # 1 eingefügt werden könnte

könnte mir jemand erklären, wie man das erreicht?

Quelle

2013-08-03 user2640254

Wenn 'jQuery nicht Teil ist Ihrer Frage ", ich fange an zu fühlen, dass dies eine Hausaufgabe ist. – MightyPork

Hier ist die Demo für Ihre Referenz http://jsfiddle.net/3fsVd/ –

@MightyPork Ich sagte nur ziehbare ist nicht Teil meiner Fragen, nicht jQuery – user2640254

Sie könnten vereinfachen diese ziemlich viel durch die Verwendung jQuery UI's Sortable

Working Example

$(document).ready(function() { 
    addElements(); 
    $(function() { 
     $("#list1, #list2").sortable({ 
      connectWith: ".lists", 
      cursor: "move" 
     }).disableSelection(); 
    }); 


}); 

function addElements() { 
    $("#list1").empty().append(
     "<li id='item1' class='list1Items'>Item 1</li>" + 
     "<li id='item2' class='list1Items'>Item 2</li>" + 
     "<li id='item3' class='list1Items'>Item 3</li>"); 
}

Quelle

2013-08-03 14:19:21 apaul

Danke, das ist genau das, was ich wollte. –

Für Demo: Click Here

Code:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <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> 
    $(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>

Quelle

2013-08-03 10:01:20

Drag und Einfügen von Div in ein anderes Div

Antwort

Verwandte Themen