如何使用jquery拖動輸入時創建多個拖放區域？

有沒有辦法在使用拖放字段或元素到容器時在頁面上生成多個拖放區域？例如，如果我有一個容器，當一個字段放在它上面時，它將動態生成頂部，左側，右側和底部拖放區域。所以我可以選擇格式化我的領域像行和列明智。像這樣Demo page。我想將這些字段樣式/設置存儲到數據庫中。如何使用jquery拖動輸入時創建多個拖放區域？

任何人都會遇到這樣的事情？

來源

2016-07-28 sridharnetha

-1

當然，只是使用（基於https://jqueryui.com/droppable/代碼）的一類作爲懸浮窗選擇

<!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.0/themes/base/jquery-ui.css"> 
    <style> 
    #draggable { width: 70px; height: 70px; padding: 0.5em; margin: 10px 10px 10px 0; border: 1px solid #000000} 
    .droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px solid #555555 } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
     // detect which dropzone the object was dropped into 
     var index = $(".droppable").index(this); 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped in box with index: " + index); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div class="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>no, Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>rather, Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>you should really Drop here</p> 
</div> 
</body> 
</html>

來源

2016-07-28 13:20:27

如何使用jquery拖動輸入時創建多個拖放區域？

回答

相關問題