jQuery draggable e appendTo non funziona

Io uso jQuery ui trascinabile ma l'opzione appendTo non funziona. Tuttavia, altre opzioni come il contenimento o la griglia funzionano correttamente. Ecco il codice:jQuery draggable e appendTo non funziona

HTML

<div id="demo"> 
</div> 
<div id="sidebar"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
</div>

sceneggiatura

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });

CSS

#demo { 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
} 
#draggable { 
    background: red; 
    width: 50px; 
    height: 50px; 
} 
#sidebar { 
    float: left; 
    width: 300px; 
} 
.item { 
    cursor: pointer; 
    background: black; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
}

Ecco una demo live: http://jsfiddle.net/fzjev/

fonte

2012-03-10 MatthewK

Sembra che per l'ap L'opzione pendTo per essere riconosciuta è che l'oggetto trascinato deve essere al di fuori del corpo.

Da jQuery UI 1.8.18 (attorno alla riga 275)

if(!helper.parents('body').length) 
    helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo));

Nel tuo esempio l'istruzione if restituisce false, quindi la logica appendTo non viene generato.

fonte

2012-03-10 16:28:39

http://jsfiddle.net/fzjev/ Trascinare un elemento, si vede che è trascinabile all'interno del #demo ma il

non si aggiunge al #demo. – MatthewK

Eclapsed la mia risposta precedente (che era davvero più di una domanda) e aggiornata con qualcosa di più simile a una risposta. Onestamente non sono sicuro del motivo per cui è impostato così com'è, ma almeno sappiamo cosa sta succedendo ora. –

ecco un bug aperto sul problema - Draggable: appendTo option doesn't work together with helper: 'original'.

La soluzione suggerita è quella di utilizzare helper: 'clone' e nascondere/mostrare l'originale all'avvio/arresto del trascinamento.

ad es.

$('.draggyThing').draggable({ 
     appendTo: '.dropArea', 
     helper: 'clone', 
     start: function (event, ui) { 
      $(this).hide(); 
     }, 
     stop: function (event, ui) { 
      $(this).show(); 
     } 
    });

Probabilmente quindi desidera aggiungere manualmente le draggables su drop di un elemento droppable.

$('.dropArea').droppable({ 
     accept: '.draggyThing', 
     drop: function (event, ui) { 
      $('.dropArea').append(ui.draggable); 
     } 
    });

fonte

2013-05-13 13:58:58 RYFN

Questo in realtà sembra più una risposta alla domanda dell'OP e una soluzione per avere lo stesso comportamento di quello che ci si aspetterebbe altrimenti. –

Jquery Sortable funziona allo stesso modo, ma ordinabile è avviato sull'elemento contenitore degli oggetti ordinabili, quindi dovresti usare 'ui.item.hide()/show()' invece di '$ (this)' in questo Astuccio –

Nel mio caso, funzionano bene questi ad esempio:

$("[drag='true']").draggable({ 
    drag: handleDragDrag, 
    start: handleDragStart, 
    stop: handleDragStop, 
    helper: 'clone', 
    appendTo: 'body' 
}) 
function handleDragStart(ev, ui) { 
    $(this).show(); 
} 
function handleDragDrag(ev, ui) { 
} 
function handleDragStop(ev, ui) { 
    $(this).show(); 
}

fonte

2016-09-12 11:23:54 lmcDevloper

jQuery draggable e appendTo non funziona

risposta

Problemi correlati