Question

我需要将文本从浏览器外部拖放到网页，但我想使用jQuery UI droppable来接受纯文本。

这是一个使用javascript的教程，这对我有用：

http://html5doctor.com/native-drag-and-drop/

但我正在动态添加一些元素，并使用liveQuery和其他一些实现起来相当复杂的其他东西使它们可以删除。

我试过类似的东西，它适用于可拖动的元素，但不适用于纯文本：

        $('#cointainer').livequery(function () {
            $(this).droppable({
                drop: function (event, ui) {

                    alert("dropped");
                },
                greedy: true
            });
        });

是否可以使用jQuery UI droppable进行此操作？

Answer 1

这是我最接近的，它使用jQuery但不是jQuery UI droppable 。 Hack是在函数中包装您需要做的任何事情，并将此代码和jQuery droppable绑定在同一元素上，并从两个drop事件中调用相同的函数。这样，您可以同时支持可放置元素和文本删除。

        $('#cointainer').livequery(function () {

            $(this).bind('dragover', function (e) {
                e.preventDefault(); 
            });


            $(this).bind('dragenter', function (e) {
                e.preventDefault();
            });

            $(this).bind('drop', function (e) {

                e.preventDefault(); // prevent redirect

                if (e.originalEvent.dataTransfer.getData('Text') == ':)') {
                    $(this).append('<div>You dropped a smile!</div>');
                }

                e.stopPropagation(); // prevent bubbling, without this we would get duplicate items if parent is droppable too, acts like jQuery greedy: true;
            });
        });

jQuery UI droppable纯文本

1 个答案: