1. 首頁
  2. 問答
  3. 拖放多個div

拖放多個div

2012-10-22 82 views
3

我有兩個<div>標籤。一個有幾個不同大小和位置的<div>標籤，並且必須將它們拖到另一個div。但是，我需要拖回前一個div，根據放置的位置更改X和Y.拖放多個div

如何使用HTML5來做到這一點？

來源

2012-10-22 Rodrigo De Freitas Oliveira

+0

我會解釋我需要什麼。 M工作在優化玻璃的情況下，即具有代表玻璃板的裂縫，其中幾個小塊位於其上。這個想法是，用戶可以將它們改變到位，將播放（div）拖到另一個與較大表單相鄰的div，以便稍後將其拖回到另一個位置。 –

回答

0

試試這個： 

<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.9.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.0/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 style="color:#0000FF"> 
    <h3>This is a heading</h3> 
    <p>This is a paragraph.</p> 
<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 
</div> 

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


</body> 
</html>

來源

2012-10-22 16:32:02

+0

感謝哥們，通過代碼。 這幾乎就是這樣。事實上，divs不能在另一個 –

+0

我會解釋我需要什麼。 M工作在優化玻璃的情況下，即具有代表玻璃板的裂縫，其中幾個小塊位於其上。這個想法是，用戶可以將它們改變到位，將播放（div）拖到另一個與較大表單相鄰的div，以便稍後將其拖回到另一個位置。 –

相關問題

 相關問題