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");
      }
    }


  );
}