Question

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

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

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>

Answer 2

更新了你的小提琴，它现在有效!!

http://jsfiddle.net/rqyv6bpg/2/

这是JS代码：

 $( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
    drop: function( event, ui ) {
        $( this ).append( "<br/>"+ui.draggable.html() );
    }
});

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

2 个答案: