jquery перетаскиваемый элемент больше не перетаскивается после удаления - PullRequest
Новая
       0

jquery перетаскиваемый элемент больше не перетаскивается после удаления

11 голосов
/ 16 февраля 2011

Я хочу иметь возможность многократно перетаскивать один и тот же элемент источника.

В тот момент, когда изображение перетаскивается, оно успешно клонируется - то есть исходное изображение остается на месте, и клон приятно падает на новое место, но старое изображение больше не перетаскивается. Проверка элемента показывает class как атрибут (без значения), т.е. не class="ui-draggable"

Как вы увидите, я пытался повторно включить перетаскивание на оригинал после клонирования, но он не работает.

Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <title></title>
  <script language="javascript" type="text/javascript">
    var copy = 0;
    var dragOptions = {
      helper: 'clone',
      cursor: 'hand',
      revert: 'invalid'
    };
    $(document).ready(function () {
      $("img").draggable(dragOptions);
      $("ul#bag > li").droppable({
        drop: function (event, ui) {
          copy++;
          var clone = $(ui.draggable).clone().attr("id", "img_" + copy);
          $(this).append(clone);
          clone.css("left", 0).css("top", 0);
          $(ui.draggable).draggable(dragOptions);
        }
      });
    });
</script>
  <style type="text/css">
    li
    {
      position: relative;
      float: left;
    }

    img
    {
      cursor: move;
    }

    div, li
    {
      display: block;
      width: 160px; 
      height: 123px;
      margin: 2px;
      border: solid 1px gray
    }

    .clear
    {
      clear: both;
    }
  </style>
</head>
<body>

  <ul id="bag">
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <ul id="shop">
    <li><img id="img1" src="images/p1.jpg" /></li>
    <li><img id="img2" src="images/p2.jpg" /></li>
    <li><img id="img3" src="images/p3.jpg" /></li>
  </ul>

  <div class="clear" id="dustbin" style="background-color:Black;"></div>
</body>
</html>

Ответы [ 3 ]

6 голосов
/ 17 февраля 2011

Итак, похоже, что после перетаскивания элемента виджет, который можно перетаскивать, вызывает собственную функцию destroy (), которая удаляет любое подобие перетаскиваемости из элемента.

Без заметного способа переопределить это с помощью опцийсобытия, я переопределил это с грубой силой в document.ready:

$. ui.draggable.prototype.destroy = function (ul, item) {};

Теперь это работает.

4 голосов
/ 22 июля 2012

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

Я сделал функцию для применения draggable состояние для элемента ... 

function MakeDraggable(ele) {
    ele.draggable({ revert: "invalid" });
}

Тогда внутри свойства drop элементов .droppable я просто ... 

MakeDraggable(ui.draggable);

Это снова включаетперетаскиваемое состояние элемента.

1 голос
/ 21 февраля 2011

Спасибо, что нашли решение. Однако мне действительно был нужен метод уничтожения ... поэтому после использования вашего решения я назначил собственный метод уничтожения другому методу ... так что ваше решение с моим будет примерно таким; 

$.ui.draggable.prototype.destroy = function (ul, item) { };
$.ui.draggable.prototype.remove = function() {
    if(!this.element.data('draggable')) return;
    this.element
        .removeData("draggable")
        .unbind(".draggable")
        .removeClass("ui-draggable"
            + " ui-draggable-dragging"
            + " ui-draggable-disabled");
    this._mouseDestroy();

    return this;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...