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

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

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

<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 (фильтрующие элементы, добавление новых элементов, классов и т.д.)

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

Спасибо заранее!

Ответы

Ответ 1

Сначала ваш способ вызова 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 для проверки.

Ответ 2

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

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

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

EDIT: это, по-видимому, предотвращает падение элемента, hmmm...

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

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

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

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