使用 Draggable 和 Droppable 运行 jQuery UI答案

【问题标题】：Running jQuery UI with Draggable and Droppable使用 Draggable 和 Droppable 运行 jQuery UI
【发布时间】：2014-08-25 19:43:53
【问题描述】：

我正在处理 this demo。为什么我无法使用 jQuery UI 运行可拖动和可放置？我在控制台上没有收到任何错误消息。

这是我正在使用的代码：

$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            var width = $(".item").width();
            var height = $(".item").height();
            var cntrLeft = (width / 2) - ( $(".draggable").width() / 2);
            var cntrTop = (height / 2) - ( $(".draggable").height() / 2);

           $(".draggable").css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

【问题讨论】：

乍一看，你没有包括Jquery UI，这是draggable和droppable的要求
另外，您在最后一个 'item' div 上的 'item' 之后缺少一个结束引号。
看看这个，看看你的想法jsfiddle.net/LEwg8/153

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您可能忘记加载 jquery UI 框架。在面板上的“框架和扩展”下，确保选中 jquery UI。

【讨论】：

【解决方案2】：

您必须包含jQuery UI 1.10.3 才能使用拖放功能。默认情况下，它们不包含在 jQuery 库中。

勾选界面左上角jQuery UI 1.10.3的框以添加引用。

See Fiddle

【讨论】：

【解决方案3】：

http://jsfiddle.net/LEwg8/152/

这是一个（某种）工作的 jsfiddle，您可以使用它来构建。

使用广泛的选择器，例如$('.item') 像您正在做的事件回调内部是灾难的根源。使用 jQuery，您几乎总是可以从事件对象中获取相关的事件元素。

【讨论】：