jQuery: draggable conexão para classificáveis. item de draggable tem um DOM diferente da lista de classificáveis
-
09-09-2019 - |
Pergunta
Agora sou capaz de arrastar um item para um classificáveis. Mas a lista de classificáveis ??tem um DOM diferente.
<!-- The draggable items. Has the "original" DOM in the LI tags. -->
<ul class="draggable_text">
<li><span>DRAG THIS A</span></li>
<li><span>DRAG THIS B</span></li>
</ul>
<!-- This list has a different DOM in the LI tags -->
<ul id="stagerows">
<li><p>This is a new DOM dragged from "DRAG THIS A"</p></li>
<li><p>This is a new DOM dragged from "DRAG THIS B"</p></li>
</ul>
$(document).ready(function() {
$('.draggable_text > li').draggable({
//helper:'clone',
helper: function(event, ui) {
return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>';
},
connectToSortable:'#stagerows'
});
$('#stagerows').sortable({
handle: '.drag_handle'
});
});
O ajudante tem o seguinte: xxx Isto deve ser deixado cair no classificáveis ??...
O "ajudante" funciona. Mas quando eu "caiu" o item na classificáveis, ele simplesmente reverte para o DOM "original". Eu gostaria que o "DOM recém-criado" (aquele criado em helper) para ser descartado no classificáveis.
Espero que eu estou fazendo sentido. Obrigado!
Outra maneira de dizer isso: quando eu arrastar uma maçã, que agora se transforma em uma laranja. mas quando eu soltá-lo, ele se transforma em uma maçã ..
Solução
$('.draggable_text > li').draggable({
helper: function(event, ui) {
var type = $(this).find('.link_type').val();
return create(type,0);
},
connectToSortable:'#stagerows'
});
$('#stagerows').sortable({
handle: '.drag_handle',
placeholder: 'placeholder_sortable'
});
/**
* When item is dropped from the Add <Stuff>
*/
$('#stagerows').droppable({
drop: function(event, ui){
type = ui.draggable.find('.link_type').val();
ui.draggable.empty();
return ui.draggable.html(create(type,0))
}
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow