Пользовательский помощник для jQuery UI Draggable - PullRequest
Новая
       7

Пользовательский помощник для jQuery UI Draggable

17 голосов
/ 14 декабря 2011

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

Вот мои перетаскиваемые элементы; 

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

И JQuery; 

$("ul li").draggable(function(){
  helper: function(){
    return $("<div></div>");
  }
});

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

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

Однако, из-за моей жизни я не могу найти это, документация о перетаскиваемых отстойах, и никто в #jquery мне не поможет. Есть идеи?

Заранее спасибо!

Ответы [ 3 ]

32 голосов
/ 14 декабря 2011

Во-первых, ваш способ вызова draggable неверен. Ожидаемый параметр - литерал объекта, а не функция.

this - это текущий перетаскиваемый элемент в функции helper.

Имея следующий HTML 

<ul>
  <li><div class="name">Name</div> <span>12-12-2011</span></li>
  <li><div class="name">Another name</div> <span>12-12-2011</span></li>
</ul>

Вы можете сделать это: 

$('ul li').draggable({
    helper: function() {
        //debugger;
        return $("<div></div>").append($(this).find('.name').clone());
    }
});

Примечание: я добавил класс к <div>, представляющему имя, чтобы выбрать его, но вы можете найти любой другой способ сделать это.

Вот вам jsfiddle для проверки.

9 голосов
/ 14 декабря 2011

ОК, при быстром тестировании будет работать следующее ... 

$("ul li").draggable({
    helper: function() {
        return $("<div>hello</div>");
    } });

обратите внимание, что вы не передаете функцию в качестве перетаскиваемого параметра.Кроме того, я добавил «hello» в пример, чтобы вспомогательный DIV действительно что-то содержал.

EDIT : Кажется, это предотвращает падение элемента, хммм ...

A FIX : Не очень, но это работает, может быть, это может дать некоторые идеи для улучшения ... 

var remember;
$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        remember = $(this).html();
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html(remember);
    }
});

Пример здесь

Если вам не нравится идея переменной "запомнить", то, кажется, можно добавить пользовательский параметр к перетаскиваемому объекту, который может содержать исходный HTML-код ... 

$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        $(this).draggable("option", "olddata", $(this).html());
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html($(this).draggable("option", "olddata"));
    }
});
3 голосов
/ 14 декабря 2011

Одним из возможных решений является

Fiddle: http://jsfiddle.net/SWbse/

   $(document).ready(function() {
      $("ul li").draggable({
         helper: 'clone',
         start: function(event, ui){
            ui.helper.children('span').remove();
         }    
     });
   });
...