Kullanıcının bazı öğeleri (div içindeki bir öğe) sayfada diğer divlere sürükleyebileceği bir web sitesi oluşturmaya çalışıyorum. Bu bir masa ya da öylesine, sadece sayfada bir yerlerde divs.jquery ile divlerin konumunu değiştirin bir bırakma sürükleyin
html5 ile & sürükleyin iyi çalışıyor, şimdi mobil cihazlar için bunu yapmaya çalışıyorum. Öğeleri div'e sürükleyebilir, orada bırakabilir ve bu dropzone'ı engelleyebilirim çünkü yalnızca bir öğe dropzone'da olmalıdır. Bu öğeyi başka bir bölüme veya sayfaya başka bir yere de sürükleyebilirim (sadece ilk kez bir div düştükten sonra bırakılabilir alanlar var) eğer bir hata yaptım ama şimdi boş olan div'a başka bir öğe bırakamam. tekrar.
Bu Dropzone'da tekrar bırakmayı nasıl etkinleştirebilirim?
Ve biri diğerine sürüklendiğinde iki div pozisyonunu değiştirmek mümkün mü?
<script type="text/javascript">
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: 'move',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
}
function handleDragStart (event, ui) {}
function handleDropEvent (event, ui) {
$(this).droppable('disable');
ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
</div>
</body>
DÜZENLEME: İşte şimdi çalışıyor sayfası: Drag&Drop Task
, html5 olmayan sürükle ve bırak yöntemlerini kullanan çok sayıda örnek vardır; – nycynik
Küçük boyutlu örneği Chrome'da denedim ve öğeleri yine boşaltılan dropzonlara bırakabilir miyim? Neyi kaçırıyorum? –
@ ink.robot nop, işe yaramıyor. Boş bir kutuya bir öğe bırakın. Daha sonra onu orijinal yerine sürükleyin ve boş bir kutuya başka bir öğeyi sürüklemeye çalışın. Yapamazsın. – j0k