jQueryUI - 소스 상자에서 두 대상 상자로 드래그 한 다음 이동 된 항목의 ID와 대상 상자의 ID를 가져옵니다.

jQueryUI draggable/droppable/sortable을 으로 이동하려고합니다. (복사 안 함) 항목을 원본 상자를 대상 상자 중 하나에 연결하십시오. 이렇게하면 사용자 은 항목을 원하는 상자로 정렬 할 수 있습니다.jQueryUI - 소스 상자에서 두 대상 상자로 드래그 한 다음 이동 된 항목의 ID와 대상 상자의 ID를 가져옵니다.

그런 다음 페이지를 서버로 POST하면 선택 항목이 저장되고 항목을 넣는 상자가 저장됩니다. 그래서 아이템이 박스 중 하나의 에 '떨어졌을'때, 나는 어떻게 든 떨어 뜨린 아이템의 ID를 얻고 넣은 박스의 ID를 얻어야합니다. 나중에 배열/개체에이 내용을 저장하겠습니다.
사용자가 드롭 가능한 상자 내에 항목을 주문할 수 있으면 좋지만 중요하지는 않습니다. 나는 그 (것)들을 가 비 정렬 명부가 어떻게에 일 것 인 지 가정하더라도 좋다고 자동적으로 잘 일렬로 세우기 위하여 를 필요로한다. 현재 항목은 대상 상자의 아무 곳으로나 떨어질 수 있으므로 모든 항목이 대상 상자 안의 모든 곳에 있습니다.
사용자가 마음을 바꾼다면 대상 상자에서 항목을 소스 상자로 다시 옮길 수 있어야합니다.
아래 코드의 셸이 있지만 제대로 작동하지 않으며 ' 이동 된 항목의 ID 또는 대상 ID를 얻는 것 같습니다. 새로운 HTML5 데이터 속성을 사용하려고했지만 아무것도 얻지 못하는 것 같습니다. 내 사이트는 HTML5이므로 이러한 새로운 기술을 사용할 수 있습니다.

업데이트 :가 작동 당함 - JSfiddle에 아래 전체 해결책 : documentation에서

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Source + Double Destination Demo</title> 
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
    <script src="../../jquery-1.7.1.js"></script> 
    <script src="../../ui/jquery.ui.core.js"></script> 
    <script src="../../ui/jquery.ui.widget.js"></script> 
    <script src="../../ui/jquery.ui.mouse.js"></script> 
    <script src="../../ui/jquery.ui.draggable.js"></script> 
    <script src="../../ui/jquery.ui.droppable.js"></script> 
    <script src="../../ui/jquery.ui.sortable.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
     h1 { padding: .2em; margin: 0; } 
     #destinationA, #destinationB { width: 200px; float: left; } 

     /* style the list to maximize the droppable hitarea */ 
     #destinationA ol, #destinationB ol, #source ul { margin: 0; padding: 1em 0 1em 3em; background-color: #f7f7f7; } 
    </style> 

    <script> 
    $(function() 
    { 
     $("#source li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#destinationA ol, #destinationB ol, #source ul").droppable(
     { 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) 
      { 
       // Get id of the item that was moved 
       var itemIdMoved = ui.draggable.data('item-id'); 
       var itemName = ui.draggable.data('item-name'); 

       // Get id of the current destination (the item is dropped into the ul tag so we need to go up a level to get the div id) 
       var destinationId = $(this).parent().attr('id'); 

       // Move the draggable into the destination box (actually moves the original li element including data attributes) 
       ui.draggable.appendTo(this); 

       // Debug 
       console.log('item ' + itemName + ' (id: ' + itemIdMoved + ') dropped into ' + destinationId); 
      } 
     }).sortable(
     { 
      sort: function() 
      { 
       // gets added unintentionally by droppable interacting with sortable 
       // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <h1 class="ui-widget-header">Source</h1>  
    <div id="source"> 
     <ul> 
      <li data-item-id="1" data-item-name="One">Item 1</li> 
      <li data-item-id="2" data-item-name="Two">Item 2</li> 
      <li data-item-id="3" data-item-name="Three">Item 3</li> 
      <li data-item-id="4" data-item-name="Four">Item 4</li> 
     </ul> 
    </div> 

    <div id="destinationA"> 
     <h1 class="ui-widget-header">Destination A</h1> 
     <ol> 

     </ol> 
    </div> 

    <div id="destinationB"> 
     <h1 class="ui-widget-header">Destination B</h1> 
     <ol> 

     </ol> 
    </div> 
</body> 
</html>

출처

2012-02-14 zuallauz

을 (이) 콜백에서

, $는 낙하 할을 나타냅니다 끌기가 떨어집니다. ui.draggable은 드래그 가능을 나타냅니다.

그래서 난 당신이 그냥 할 수있는 것 같아요 :

$('#destinationA ul, #destinationB ul').droppable(
{ 
    drop: function(event, ui) 
    { 
     // Get id of the item that was moved 
     var idMoved = $(this).data('itemid'); 
     console.log(idMoved); 

     // How to get the destination ID that the item was dropped to? 
     var idDropped = this.id; 
     console.log(idDropped); // "destinationA" or "destinationB" 
    } 
})

출처

2012-02-14 10:24:47

최고 동료, 많은 감사를! 나는 그것을 작동시키지, [그것을 (체크 아웃)] (http://jsfiddle.net/zuallauz/U9YHw/). 드래그 앤 드롭으로 대상 또는 대상에서 소스로 다시 이동할 수 있으며 이동 된 항목의 destinationId 및 데이터 속성을 표시합니다. Larry David은 "[꽤] (http://www.youtube.com/watch?v=Rp4pJ-mEmE4#t=1m19s)"라고 말합니다. – zuallauz

도움이 되니 기쁩니다! :영형) –

jQueryUI - 소스 상자에서 두 대상 상자로 드래그 한 다음 이동 된 항목의 ID와 대상 상자의 ID를 가져옵니다.

답변

관련 문제