Пользовательский интерфейс jQuery с возможностью перетаскивания и сброса Возврат только в исходное положение

Codepen здесь: https://codepen.io/anon/pen/weZwVx

У меня есть несколько изображений, которые можно перетаскивать. Мне нужно, чтобы они были возвращены в исходное положение только. Таким образом, даже если их перетащить обратно в неправильное место, они привяжутся к исходному положению в таблице.

Прямо сейчас, когда вы перетаскиваете его обратно в исходное положение, его можно добавить к другому td, даже если он содержит другое изображение. Изображение должно иметь возможность переместиться в фиолетовый ящик, а затем, если кто-то переместит его обратно на черный стол, оно должно вернуться только в исходное положение, даже если его перетащите обратно в другое место.

Вот JS:

$( ".emojis" ).draggable({
                revert : function(event, ui) {
        $(this).data("ui-draggable").originalPosition = {
            top : 0,
            left : 0
        };
        return !event;
    }
});
            $('#drop-em').droppable({
                drop: function(ev, ui) {
                    $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
                }

            });
            $('#emoji-table td').droppable({
                drop: function(ev, ui) {


                    $(ui.draggable).detach().css({top: 0,left: 0}).prependTo(this);

                }

            });

javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person Mia    schedule 15.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что самым простым способом, основанным на предоставленном вами коде, было бы установить соответствующий идентификатор для элементов и таким образом, когда изображение удаляется, он может проверить, соответствуют ли идентификаторы друг другу. Если они не совпадают, вы просто отправляете изображение в правильный элемент.

  $( ".emojis" ).draggable({
    revert : function(event, ui) {
    // on older version of jQuery use "draggable"
    // $(this).data("draggable")
    // on 2.x versions of jQuery use "ui-draggable"
    // $(this).data("ui-draggable")
    var bRevertingImg = this.parent("#drop-em");

    //Only apply logic when reverted
    //needed since this function is called anytime .emoji is dropped
    if (!bRevertingImg.length) {
      var imgID = $(this).data("id");
      var cellID = $(this).parent().data("id");

      //If the child and parent ids don't match, we move the child to the correct parent
      if (imgID !== cellID) {
        var correctCell = $("#emoji-table").find("td[data-id='" + imgID + "']");
        correctCell.prepend(this)        
      }

      // return boolean
    }
    return !event;   

    // that evaluate like this:
    // return event !== false ? false : true;
  }
});

Я отредактировал ваш codepen, чтобы показать его в действии здесь

person Eric Hoose    schedule 15.07.2017
comment
Спасибо, это именно то, что я искал. - person Mia; 16.07.2017