正在运行具有可拖动和可放置的jQuery UI

Question

我正在研究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"
            });
        }
    });
});

Answer 1

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

Answer 2

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

选中界面左上角的框，以jQuery UI 1.10.3添加参考。

See Fiddle

Answer 3

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

这里是一种（可以工作的）jsfiddle，您可以从中构建。

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