Как я могу создать jQuery draggable clone?

Ответ 1

Обратите внимание на второй ответ tohster - это устарело.

=======

http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.html это может быть помощь

Цитата из вышеуказанного сайта:

Во время работы с jQuery UI draggables я заметил, что, похоже, не существует класса, связанного с перетаскиваемым помощником, и поэтому он оформлен так же, как и перетаскиваемый вами. В результате вы должны прибегнуть к функции функции запуска, чтобы динамически добавлять класс:

$(".dragme").draggable({helper: "clone",
 start: function(e, ui)
 {
  $(ui.helper).addClass("ui-draggable-helper");
 }
});

В результате вы должны прибегнуть к функции функции запуска, чтобы динамически добавлять класс:

.ui-draggable-helper {
 border: 1px dotted #000;
 padding: 6px;
 background: #fff;
 font-size: 1.2em;
}

Ответ 2

Там лучший способ

jQuery UI развился после того, как ответ был опубликован в 2011 году.

С текущими версиями jQuery, класс .ui-draggable-dragging добавляется в перетаскиваемый клон.

Так, например, если у вас есть следующий перетаскиваемый элемент:

<div class="myDraggable">
</div>

<script>
   $('.myDraggable').draggable({opacity: 0.7, helper: "clone"});
</script>

<style>
   .myDraggable.ui-draggable-dragging { background: red; }
</style>

.. то клон myDraggable будет иметь красный фон, когда он будет поднят и перетащен.

Вспомогательный класс присутствует в jQuery UI 1.7.1 и далее, и он может также присутствовать в некоторых более ранних версиях, но я не отслеживал это.

Ответ 3

Более чистый подход заключается в использовании вспомогательной функции:

function getHelper(event, ui) {
    var helper = $(ui).clone();
    helper.addClass("ui-draggable-helper");
    return helper;
}

$('.myDraggable').draggable({
    helper: getHelper
});