0

我需要将文本从浏览器外部拖放到网页，但我想使用 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 来做到这一点？

4

1 回答 1

1

这是我得到的最接近的，它使用 jQuery 但不是 jQuery UI droppable。Hack around 是将您需要做的任何事情包装在函数中，并将此代码和 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;
            });
        });
于 2013-01-29T17:49:27.610 回答