jquery ui可拖拽/可拖拽，掉落時可交換拖拽

目前我有3個可拖曳項目設置了3個ID和類.word。jquery ui可拖拽/可拖拽，掉落時可交換拖拽

我已經成功地將它們放置到位，並且在拖出dropzone時也恢復到其初始位置。

我的主要目標是在拖放到dropzone時將可拖動的對象交換。例如：＃word1在dropzone中，＃word2被拖到dropzone，＃word1應該返回到初始位置，＃word2應該捕捉到dropzone等等。

我已經嘗試了各種各樣的東西，但無法正確理解邏輯。感謝社區。

編輯：

@bipen感到抱歉，代碼是迄今爲止如下：

HTML 
<div id="line"></div> 
<img src="resources/word1_correct.png" id="word1" class="word" /> 
<img src="resources/word2.png" id="word2" class="word" /> 
<img src="resources/word3.png" id="word3" class="word" /> 


JS 
// JavaScript Document 
$(document).ready(function() { 

var p = $("#word1"); 
var offset = p.offset(); 

var p2 = $("#word2"); 
var offset2 = p2.offset(); 

var p3 = $("#word3"); 
var offset3 = p3.offset(); 

$(".word").draggable({ 
    containment: "parent", 
    revert: 'invalid', 
    revertDuration: 0, 
    start: function(event, ui) { 
    // Log start dragged position to element data 
} 


// end .word draggable 
}); 

$("#line").droppable({ 
    accept: '.word', 
    tolerance: "touch", 
    drop: function(event, ui) { 
    $(ui.draggable).css('top',$(this).position().top); 
    $(ui.draggable).css('left',$(this).position().left); 
    $(ui.draggable).attr('class', 'dropped'); 
    }, 
    out: function(event, ui) { 
    $(this).droppable('option', 'accept', '.word'); 
    $('#word1').draggable('destroy'); 
    $('#word1').offset({ top: offset.top, left: offset.left}); 
    $('#word1').draggable({ 
    revert: 'invalid', 
    revertDuration: 0, 
    }); 

    $('#word2').draggable('destroy'); 
    $('#word2').offset({ top: offset2.top, left: offset2.left}) 
    $('#word2').draggable({ 
    revert: 'invalid', 
    revertDuration: 0, 
    }); 

    $('#word3').draggable('destroy'); 
    $('#word3').offset({ top: offset3.top, left: offset3.left}) 
    $('#word3').draggable({ 
    revert: 'invalid', 
    revertDuration: 0, 
    }); 


    } 

// end #line droppable 
}); 




//end document ready 
});

來源

2012-11-26 joshzee

發佈您的代碼....讓我們不要」不得不從開始寫eveything ... – bipen

試試這個

$("#dropzone").droppable({ 
    drop: function(event, ui) { 
      $(this).html(); //empty the dropzone 
      ui.appendTo(this); //add the dragged word to it 
    }

來源

2012-11-26 12:31:29 bipen

不幸的是，這並沒有奏效。我將嘗試使用IF語句來查看是否可以想出一些東西。謝謝比朋。 – joshzee

你只需動位置拖動：

例子是我有兩個droppable（droppable1，droppable2）和兩個可拖動（draggable，draggable2）

中的document.ready

我移動位置draggable1 & draggable2到droppable1，檢查這個代碼：

var d1left = $("#droppable1").position().left + 20; 
var d1top = $("#droppable1").position().top + 25; 
$("#draggable1").css({'position': 'absolute', 'left': (d1left*1) + 'px', 'top': ((d1top*1)+15) + 'px'}); 
$("#draggable2").css({'position': 'absolute', 'left': (d1left*1) + 'px', 'top': ((d1top*2)+20) + 'px'});

或許這可以幫助你，TQ

來源

2013-12-03 21:16:51 penjepitkertasku

jquery ui可拖拽/可拖拽，掉落時可交換拖拽

回答

相關問題