javascript - jQuery - 在 mousedown 上创建一个新的可拖动 div，然后可以在同一操作中拖动它

Question

我想在 mousedown 上动态创建一个可拖动的 div，然后可以在同一个 mousedown 事件中将其拖动到可放置区域并放下。

到目前为止，我要说的是，在 mousedown 上创建了一个新的可拖动 div，然后该 div 跟随光标。但不能放入可放置区域。

JS Fiddle 在这里 - http://jsfiddle.net/rqyv6bpg/

jQuery 代码:

jQuery(document).ready(function ($) {

//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){

var x = e.pageX + 'px';
var y = e.pageY + 'px';

  $('<div/>', {
    "class": "test",
    text: "Draggable track that can be dropped into droppable queue!",
  }).css({
  "position": "absolute",                    
  "left": x,
  "top": y,
  "z-index": 1000
}).draggable()
    .appendTo($(document.body))
});

//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
   left:  e.pageX,
   top:   e.pageY
});
});

$( "#queue-bar" ).droppable();

});

帮助将不胜感激!提前致谢。

Answer 1

如果我没理解错的话，你正在寻找 helper draggable widget 的选项.

 $(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: "clone", // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
    }
  });
});

$(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: "clone", // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
    }
  });
});

.search-result-container {
  background-color: red
}
#queue-bar {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>

您还可以通过返回用作助手的元素来创建自定义助手，如下所示:

$(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: function(){
      // return a custom element to be used for dragging
      return $("<div/>",{ 
        text: $(this).text(),
        class:"copy"
      })
    }, // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      //you might want to reset the css using attr("style","")
      ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
    }
  });
});

.search-result-container {
  background-color: red;
}
#queue-bar {
  background-color: blue;
}
.copy{
   background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>