动态拖放jquery

我想创建动态的可拖放容器，所以我可以在它们之间移动一个排序列表。动态拖放jquery

我有订单和多选择下拉（http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/），这是从代码中填充后面

项目选择我要动态添加可投放的div，我可以通过填充每次排序列表将排序列表拖放到任何容器中，然后拖放到容器中的该div中的可排序列表中，或者返回到排序列表。

我可以创建可拖放的容器，但是我无法从排序列表中将项目放入它们中。

下面是我的代码

<script type="text/javascript"> 
    $(function() { 
     $("select").multiselect({ 
      click: function (event, ui) { 
       if (ui.checked) { 
        addGroup(ui.value) 
       } 
      } 
     }); 
    }); 
</script> 

<script type="text/javascript"> 
    function addGroup(container) { 
     var x = $("<div class='dropcontainer' id='" + container + "'><p>GROUP #</p><ul class='sortable-list'></ul></div>"); 

     $("div#groups").append(x); 
     x.droppable({ 
      activeClass: 'dragactive', 
      hoverClass: 'drophover', 
      drop: function (event, ui) { 
      } 
     }); 
    } 
</script> 
<script type="text/javascript"> 
    $('#groups .sortable-list').sortable({ 
     connectWith: '#groups .sortable-list' 
    }) 

</script> 
<script> 
    $(function() { 
     $("#sortable").sortable(({ 
    connectWith: '#groups .sortable-list' 
}) 
</script> 

<div class="bootstrap-frm"> 
    <div> 
     <select id="ddlGroups" size="5" runat="server"></select> 
    </div> 
    <ul id="sortable"> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
    </ul> 
    <div id="groups"> 
    </div> 

</div>

编辑：

我已经修改了我的代码，以便从下拉菜单中选择向下时，将创建一个新的动态排序连接列表，但我不能拖东西。到新创建的列表上。

http://jsfiddle.net/pwnxkme4/30/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#sortable1, .sortable-list").sortable({ 
       connectWith: "#sortable2 .sortable-list" 
      }); 
     }); 
    </script> 
    <style> 
       .left { 
        float: left; 
       } 

       .right { 
        float: right; 
       } 
       #center-wrapper { 
        margin: 0 auto; 
        width: 920px; 
       }    
       .column { 
        margin-left: 2%; 
        width: 400px; 
       } 

        .column.first { 
         margin-left: 0; 
        } 

       .sortable-list { 
        background-color: #F93; 
        list-style: none; 
        margin: 0; 
        min-height: 60px; 
        padding: 10px; 
       } 

       .sortable-item { 
        background-color: #FFF; 
        border: 1px solid #000; 
        cursor: move; 
        display: block; 
        font-weight: bold; 
        margin-bottom: 5px; 
        padding: 20px 0; 
        text-align: center; 
       }    

       #containment { 
        background-color: #FFA; 
        height: 230px; 
       } 
       .placeholder { 
        background-color: #BFB; 
        border: 1px dashed #666; 
        height: 58px; 
        margin-bottom: 5px; 
       } 

       #topBar { 
        margin: 40px; 
        height: 50px; 
       } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(document.body).on('change', '#multi', function() { 
      addSortableDiv($(this).val()); 
     }); 

     function addSortableDiv(item) { 
      var x = $('<div class="column left" id="' + item + '"><ul class="sortable-list"><li class="sortable-item"></li></ul></div>'); 
      $("div#sortable2").append(x); 
      x.droppable({ 
       drop: function (event, ui) { 

       } 
      }); 
     }; 
    </script> 


    <div id="dragDropContainer"> 
     <div id="topBar"> 
      <select id="multi"> 
       <option value="option1">Option 1</option> 
       <option value="option2">Option 2</option> 
       <option value="option3">Option 3</option> 
       <option value="option4">Option 4</option> 
       <option value="option5">Option 5</option> 
       <option value="option6">Option 6</option> 
       <option value="option7">Option 7</option> 
       <option value="option8">Option 8</option> 
       <option value="option9">Option 9</option> 
       <option value="option10">Option 10</option> 
      </select> 
     </div> 
     <div id="sortable1" style="width:400px;"> 

      <div class="column left first"> 

       <ul class="sortable-list"> 
        <li class="sortable-item">Order A</li> 
        <li class="sortable-item">Order B</li> 
        <li class="sortable-item">Order C</li> 
        <li class="sortable-item">Order D</li> 
        <li class="sortable-item">Order E</li> 
       </ul> 

      </div> 
     </div> 
     <div id="sortable2"> 

     </div> 
    </div> 
</body>

来源

2014-10-29 Toffeeweb

小提琴将是有益的。 – 2014-10-29 11:11:32

我想你一定能适应这为您的需求，我看看到它，因为它是使用不是id，这将让我有兴趣之前，这就是我来了与...一起。

$(function(){ 
    $(".dragMe").draggable(
     { 
     revert : function(event, ui) { 
      $(this).data("uiDraggable").originalPosition = { 
       top : 0, 
       left : 0 
      }; 
      return (event !== false) ? false : true; 
     } 
    }); 
    $("#left, #right").droppable(
     { 
     drop: function(ev, ui) { 
      var dropped = ui.draggable; 
      var droppedOn = $(this); 
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
     } 
    }); 

    $("#multi").on("change", function(){ 
     var item = $(this).val(); 
     $("#right").append("<p>" + item + "</p>"); 
    }); 
});

它具有我认为你以后的功能。

这里是一个JSFIDDLE 希望这有助于

来源

2014-10-31 08:49:51 Parody

感谢Parody，但我想创建一个新的可排序的div与排序列表，所以我可以从原始列表拖放到新创建的列表，如果需要的话可以返回。 – Toffeeweb 2014-10-31 09:06:03

动态拖放jquery

回答

相关问题