Kéo và chèn div vào một div

Tôi đang cố gắng thiết kế một đối tượng địa lý có thể kéo và chèn một div vào div khác.Kéo và chèn div vào một div

Ví dụ:

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

tôi muốn làm # 1 kéo (Tôi biết nó có thể được thực hiện với jQuery, vì vậy có thể kéo không phải là một phần của câu hỏi của tôi), và kéo # 1 trên # 2 và khi di chuột lên, số 2 có thể được chèn vào # 1

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

ai đó có thể giải thích cho tôi cách đạt được điều đó?

Nguồn

2013-08-03 user2640254

Nếu 'jQuery không phải là một phần của câu hỏi của bạn, tôi bắt đầu cảm thấy rằng đây là một bài tập về nhà. – MightyPork

Đây là bản demo để bạn tham khảo http://jsfiddle.net/3fsVd/ –

@MightyPork tôi chỉ nói rằng draggable không phải là một phần của câu hỏi của tôi, không phải jQuery – user2640254

Bạn có thể đơn giản hóa này khá một chút bằng cách sử dụng 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>"); 
}

Nguồn

2013-08-03 14:19:21 apaul

Cảm ơn bạn, đây chính là điều tôi muốn. –

Đối với bản 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>

Nguồn

2013-08-03 10:01:20

Kéo và chèn div vào một div

Trả lời

Các vấn đề liên quan