jquery 可拖動元素克隆和 static

Question

我正在使用 JQUERY 的“可拖動”function。 如何使我的一些<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");
      }
    }
  );
}