jquery ui перетаскиваемый/отбрасываемый, меняйте местами перетаскиваемые при сбросе

в настоящее время у меня есть 3 перетаскиваемых элемента с 3 идентификаторами и классом .word.

Я успешно заставил их упасть на место, а также вернуться в исходное положение, когда их вытащили из зоны сброса.

моя главная цель - поменять местами перетаскиваемые объекты при попадании в зону сброса.

так, например: #word1 находится в зоне сброса, когда #word2 перетаскивается в зону сброса, #word1 должен вернуться в исходное положение, а #word2 должен привязаться к зоне сброса и так далее.

Я пробовал разные вещи, но не могу правильно понять логику. спасибо сообщество.

РЕДАКТИРОВАТЬ:

@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
});

jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person joshzee    schedule 26.11.2012    source источник
comment
опубликуйте свой код.... чтобы нам не пришлось писать все с самого начала...   -  person bipen    schedule 26.11.2012

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это

$( "#dropzone" ).droppable({
   drop: function( event, ui ) {
            $( this ).html(); //empty the dropzone 
           ui.appendTo( this ); //add the dragged word to it
   }
person bipen    schedule 26.11.2012
comment
к сожалению, это не сработало. Я собираюсь поработать над этим, попробовать оператор IF и посмотреть, смогу ли я что-нибудь придумать. Спасибо, Бипен. - person joshzee; 04.12.2012

arrow_upward
0
arrow_downward

вы просто перемещаете позицию перетаскиванием:

например, у меня есть два 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

person penjepitkertasku    schedule 03.12.2013