目前我有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
});
发布您的代码....让我们不要”不得不从开始写eveything ... – bipen