jquery 可拖动元素克隆和 static

Question

I'm using the "draggable" function of JQUERY. How can I make some of my <div> elements to be cloned?

These are my examples, both are important to be working together.

Actually working:

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

This one is not working, this is my goal!

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

Important: I NEED BOTH ways!

This is the code I am using:

   $ (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

I solved my problem.

Maybe this can help, if someone finds this post and need my solution.

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