Przeciągnij i wstaw div do innego div

Próbuję zaprojektować funkcję, która może przeciągnąć i wstawić jeden div do innego div.Przeciągnij i wstaw div do innego div

Na przykład:

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

chcę zrobić # 1 przeciągany (wiem, można to zrobić z jQuery, więc przeciągać nie jest częścią mojego pytania), a następnie przeciągnij # 1 na # 2 , i kiedy mouseup, # 2 może być wstawiony do # 1

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

Czy ktoś może mi wyjaśnić, jak to osiągnąć?

Źródło

2013-08-03 user2640254

Jeśli 'jQuery nie jest częścią twojego pytania ", zaczynam czuć, że to jest praca domowa. – MightyPork

Oto wersja demonstracyjna w celach informacyjnych http://jsfiddle.net/3fsVd/ –

@MightyPork Mówiłem tylko, że przeciąganie nie jest częścią moich pytań, a nie jQuery – user2640254

Można by uprościć to trochę za pomocą 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>"); 
}

Źródło

2013-08-03 14:19:21 apaul

Dziękuję, właśnie tego chciałem. –

Dla Demo: Click Here

Kod:

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

Źródło

2013-08-03 10:01:20

Przeciągnij i wstaw div do innego div

Odpowiedz

Powiązane problemy