jquery可拖动元素克隆和静态

Question

我正在使用 JQUERY 的“可拖动”功能。如何使我的一些 <div> 元素被克隆？

这些是我的例子，两者一起工作很重要。

实际工作：

<div class="dragzones">Drag me, but im unique okay?</div>

这个不行，这是我的目标！

<div class="dragzones_clone">I want to be dragged and cloned too!</div>

重要提示：我需要两种方式！

这是我正在使用的代码：

   $ (init);
  function init() {
    $(".dragzones").draggable({
      start: handleDragStart,
      cursor: 'move',
      revert: "invalid",
    }
                             );
    $(".dropzones").droppable({
      drop: handleDropEvent           
    }
                             );
    validateDropzones();
  }
  function handleDragStart (event, ui) {
    $(this).css('z-index', 9999);
  }
  function handleDropEvent (event, ui) {
    if ($(this).hasClass('occupied')) {
      ui.draggable.draggable('option', 'revert', true);
      return false;
    }
    $(this).append(ui.draggable);
    ui.draggable.position({
      of: $(this), my: 'left top', at: 'left top'}
                         );
    ui.draggable.css('z-index', 0);
    setTimeout(validateDropzones, 0);
  }
  function validateDropzones() {
    $(".dropzones").each(function(){
      if ($(".dragzones", this)[0]) {
        $(this).addClass("occupied");
      }
      else {
        $(this).removeClass("occupied");
      }
    }
  );
}

Answer 1

我解决了我的问题。

如果有人发现这篇文章并需要我的解决方案，也许这会有所帮助。

  $ (init);
  function init() {
    $(".clonezone").draggable({
        start: handleDragStart,
        helper: "clone",
        revert: "true",
    });

    $(".dragzones").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
    });

    $(".dropzones").droppable({
        accept: ".dragzones, .clonezone",
        drop: function (event, ui) {
        var droppable = $(this);
        var draggable = ui.draggable;
        var className = ui.draggable.attr("class").split(' ')[0] 

        if(className==("clonezone")){
            draggable.clone().appendTo(droppable);
            ui.draggable.css('z-index', 0);
            setTimeout(validateDropzones, 0);
        }
        else{
            if ($(this).hasClass('occupied')) {
            ui.draggable.draggable('option', 'revert', true);
            return false;
            }
            $(this).append(ui.draggable);
            ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
            ui.draggable.css('z-index', 0);
            setTimeout(validateDropzones, 0);
        }
      }
    }
   );
    validateDropzones();
  }
  function handleDragStart (event, ui) {
    $(this).css('z-index', 9999);
  }
  function validateDropzones() {
    $(".dropzones").each(function(){
      if ($(".dragzones, .clonezone", this)[0]) {
        $(this).addClass("occupied");
      }
      else {
        $(this).removeClass("occupied");
      }
    }
  );
}