动态创建可放置元素

问题描述

我正在使用jQuery UI 可拖动和可拖放小部件. (Sortable无法为我提供足够的灵活性.)

I'm implementing drag and drop using the jQuery UI Draggable and Droppable widgets. (Sortable didn't provide quite enough flexibility for me.)

拖动时，我正在动态创建一个放置占位符元素，以精确显示放置放置的位置.

As I drag, I'm dynamically creating a drop placeholder element to show precisely where a drop would be placed.

但是如何使此放置占位符本身可放置?如果我创建了它，然后立即对其调用droppable()方法，则没有任何效果.因此，如果用户直接将其放置在放置占位符上，我怎么能检测到这一点?

But how can I make this drop placeholder droppable itself? If I create it and then immediately call the droppable() method on it, this has no effect. And so if they user drops directly over a drop placeholder, how could I detect this?

您可以在 http://jsbin.com/uciviy/14 上看到到目前为止的内容.

You can see what I have so far at http://jsbin.com/uciviy/14.

推荐答案

可以动态创建div并使其可放置.

It is possible to create a div dynamically and make it droppable.

您可以通过JQuery创建div，然后使其可放置，或者在拖动事件在可拖动元素上开始并且可以将该元素放置在创建的新div上时，创建可放置div.可能是这样的:

You can either create the div through JQuery and then make it droppable, or create a droppable div when the drag event begins on a draggable element and that element can be dropped on the new div created. This is possible like so:

$( "<div>Dynamic Droppable Div</div>" ).droppable( dropOptions ).appendTo( "#anotherDiv" );

在这里拨弄.

这篇关于动态创建可放置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！