동적 드래그 앤 드롭 jquery

동적 인 droppable 컨테이너를 만들어서 정렬 된 목록을 이동할 수 있습니다. 동적 드래그 앤 드롭 jquery

나는 수주 및

뒤에 코드에서 항목 내가 동적 I에 의해 채울 수있는 낙하 할 사업부를 추가 할 선택할 때마다 채워집니다 다운 다중 선택 드롭 (http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/)와 정렬 된 목록을 정렬 된 목록에서 모든 컨테이너로 끌어서 해당 div의 정렬 가능한 목록, 컨테이너 사이 또는 정렬 된 목록으로 다시 끌어다 놓을 수 있습니다.

나는 droppable 컨테이너를 만들 수 있지만 정렬 된 목록의 항목을 드롭 할 수 없습니다. 다음은

내 코드입니다

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

편집 :. 내가 드롭 다운 메뉴에서 선택하면 새 동적 정렬 연결리스트가 생성되지만 난 아무것도 끌 수 없습니다 그래서 내 코드를 수정 한

새로 생성 된 목록에 추가합니다. 그것은 나를 관심있어하는 전에없는 뭔가 ID를 사용 하였다 나는 당신이 당신의 필요에 따라이 적응 할 수있을 것이라고 생각

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

하는 데 도움이 JSFIDDLE 희망입니다. –

, 내가 그것으로보고했고이 내가 온 것입니다 와 함께.

$(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>"); 
    }); 
});

내가 생각한 기능이 있습니다. 여기

이이 바이올린이 도움이 될 것

출처

2014-10-31 08:49:51 Parody

Parody에게 감사 드려요. 그러나 정렬 된 목록으로 새로운 삭제 가능한 div를 만들고 싶습니다. 그래서 원래 목록에서 필요에 따라 새로 생성 된 항목으로 드래그 앤 드롭 할 수 있습니다. – Toffeeweb

동적 드래그 앤 드롭 jquery

답변

관련 문제