jquery克隆不能在droppable上工作

我有一個div，我可以拖動到其他div，它的工作正常。jquery克隆不能在droppable上工作

但與助手：'克隆'，它可能拖動div，但可拖拽它不工作。

你知道如何解決這個問題嗎？

的jQuery：

$(function() { 
    $(".draggable").draggable({ helper: 'clone', revert: 'invalid' }); 
    $(".droppable").droppable({ 
     accept: ".draggable" 
    }); 
});

工作示例：http://jsfiddle.net/p21z4jy0/

來源

2015-11-25 Oscar

是可放開有任何其他jQuery的UI部件（例如s ），如果是的話，他們可以衝突和干擾，每個小部件添加到現有小部件的順序是重要的（和jquery-ui中的已知問題），嘗試按不同順序添加 –

感謝您的回答，但droppable沒有任何其他部件！ – Oscar

我認爲你正在尋找http://jsfiddle.net/p21z4jy0/2/

$(function() { 
 
    $(".draggable").draggable({ helper: 'clone', revert: 'invalid' }); 
 
    $(".droppable").droppable({ 
 
     accept: function(drag) { 
 
      var dropId = $(this).attr('data-id'); 
 
      var dragId = $(drag).attr('data-id'); 
 
      return dropId === dragId; 
 
     }, 
 
     drop: function (event, ui) { 
 
      $('.droppable').append(ui.draggable); 
 
     } 
 
    }); 
 
});

.draggable{ 
 
    width:100px; 
 
    border: 1px solid green; 
 
} 
 
.droppable { 
 
    width: 300px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    border: 1px solid green; 
 
} 
 
.draggable { 
 
    height:50px; 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="draggable" data-id='a'>draggable a</div> 
 
<div class="droppable" data-id='a'>droppable a</div>

來源

2015-11-25 20:30:29 Sachink

感謝您的回答。但隨着你的解決方案，可投資的div將會上升，而不是相反。並且還要在可放入的內容中移動可拖動的div。 – Oscar

@Oscar這個答案解決了你問的問題。如果你想保持原來的可放置位置，並添加一個克隆來放置它不會增加，否則它是與你的CSS分開的問題。在拖放之後拖動可拖動也是另一個問題（使拖放工作成爲您的問題），所有這些都已經被詢問和回答。如果你自己做一點研究，你可以解決這些問題。如果您以後仍然遇到此類問題，請發佈不同的問題。這是一個問答網站，並提出新的*要求*一旦你得到一個答案是不鼓勵據我所知... –

jquery克隆不能在droppable上工作

回答

相關問題