如何遞歸創建jQuery UI droppables？

Question

我使用jQuery UI拖放。

當可拖動的項目被刪除時，我使用拖放功能追加一個新的HTML元素，並使其可拖動和放置。它在第一種情況下工作（請參閱http://jsfiddle.net/ze5zgfsq/1/），但可拖動+拖放功能（包括拖放功能）不會超過此功能。

我希望它能遞歸地工作，但是，如果另一個可拖動元素被放入已創建元素（已放下的元素）中，那麼會在該元素內創建一個新的可拖動的可放置元素等等。

這裏的示例代碼：

$("#draggableObject").disableSelection(); 

$("#draggableObject").draggable({ 
    revert: "invalid", 
    helper: "clone", 
    opacity: 0.7 
}); 


$(".container").droppable({ 
    accept: "#draggableObject, .droppedObject", 
    activeClass: "stateHighlight", 
    hoverClass: "stateHover", 
    greedy: true, 
    drop: function (event, ui) { 
     $(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>'); 
     $(".droppedObject").draggable({ 
      revert: "invalid", 
      helper: "clone", 
      opacity: 0.7 
     }).droppable({ 
      accept: "#draggableObject, .droppedObject", 
      activeClass: "stateHighlight", 
      hoverClass: "stateHover", 
      greedy: true, 
      drop: function (event, ui) { 
       $(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>'); 
       $(".droppedObject").draggable({ 
        revert: "invalid", 
        helper: "clone", 
        opacity: 0.7 
       }); 

      } 
     }); 

    } 
}); 

而這裏的HTML/CSS：

<ul> 
    <li id="draggableObject">Draggable Object</li> 
</ul> 
<ul class="container"> 
    <li>Drop Items Here</li> 
</ul> 


ul { 
    height: 300pt; 
    width: 200pt; 
    border: 1pt solid blue; 
    border-radius: 2pt; 
} 
li { 
    display: block; 
    min-height: 100pt; 
    min-width: 100pt; 
    border: 1pt solid black; 
    border-radius: 2pt; 
    margin: 2pt; 
    cursor: move; 
    text-align: center; 
} 

Answer 1

我碰到你的問題就來了，而試圖實現類似的東西。看看這有助於：

http://jsfiddle.net/sdqfotqe/1/

我使用的技巧是創建選項單獨對象然後用它裏面本身即$ d.droppable（droppableOptions）;

它並沒有完全做你想做的事情，而是應該幫助事物的遞歸方面。

HTML：

<div id="divItems"> 
    <div data-fhirq-type="group" class="editor-choice">Group</div> 
    &nbsp;&nbsp; 
    <div data-fhirq-type="question" class="editor-choice">Question</div> 
</div> 

<br/><br /> 

<div id="divQuestionnaire"> 
    <div id="divRootGroup" class="editor-group"></div> 
</div> 

CSS：

.editor-group { 
    border: 1px solid #000; 
    min-height: 50px; 
    width:100%; 
    padding:20px; 
    background: #efefef; 
} 

.editor-question { 
    border: 1px solid #000; 
    min-height: 50px; 
    width:100%; 
    padding:20px; 
    background: #677b92; 
} 

.editor-choice { 
    cursor:move; 
    width: 100px; 
    height: 75px; 
    background: #ccc; 
    display:inline-block; 
} 

.droppable-hover { 
    background: #fffa00; 
} 

.remove-choice { 
    width:25px; 
    height:25px; 
    border: 1px solid #ddd; 
} 

的JavaScript：

$(document).ready(function() { 

    $('#divGroupOptions').hide(); 
    $('#divQuestionOptions').hide(); 

    var droppableOptions = { 
     accept: '.editor-choice', 
     greedy: true, /* only drop the element in one place */ 
     hoverClass: "droppable-hover", /* highlight the current drop zone */ 
     drop: function (event, ui) { 

      /* clone, because many elements can be added - it's a copy, not a move */ 
      $d = $(ui.draggable).clone(); 

      $d.removeClass('editor-choice'); 
      $d.addClass(($d.attr('data-fhirq-type') == 'group') ? 'editor-group' : 'editor-question'); 

      /* add a button so the element can be removed if no longer necessary */ 
      var $removeBtn = $('<button class="remove-choice">x</button>').click(function() { $(this).parent().remove(); }); 
      $d.append($removeBtn); 

      /* make the new element droppable i.e. to support groups within groups etc... */ 
      $d.droppable(droppableOptions).sortable(); 

      $(this).append($d); 
     } 
    }; 

    $("#divRootGroup").droppable(droppableOptions).sortable(); 
    $(".editor-choice").draggable({ 
     helper: 'clone' 
    }); 
});