关于运行jQuery UI Draggable Droppable的问题

时间:2014-08-25 19:43:53

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

你能否看一下 this Demo ,让我知道为什么我无法使用jQuery Ui运行draggable和droppable? 我在控制台上没有收到任何错误消息。

以下是我正在使用的代码:

$(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"
            });
        }
    });
});

3 个答案:

答案 0 :(得分:0)

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

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

See Fiddle

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

这是一种可以构建的(某种)工作jsfiddle。

使用广泛的选择器,例如事件回调中的$('.item')就像你正在做的那样是灾难的一种方法。使用jQuery,您几乎总能从事件对象中获取相关的事件元素。