引发jquery draggable的“ create”事件

问题描述

| 我一直在尝试找出如何使用jquery.ui可拖动控件的\'create \'事件。一个简单的例子，例如引发警报是行不通的：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<Meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>Drag \"create event\" test</title>

<script src=\"js/jquery.js\"></script>
<script src=\"js/jquery-ui.js\"></script>

<style type=\"text/css\" media=\"all\">
#pai { width:1000px; border:1px solid #ccc; position:relative; }
#filho { width:100px; border:1px solid #c00; position:relative; top:0; left:0; }
</style>

<script type=\"text/javascript\">

$(document).ready(function(){                           

    $(\"#filho\").draggable();

    $(\"#filho\").bind(\"dragcreate\",function(event,ui) {
        alert(\"VAAAAAAAAAAAI!\");
    });
});
</script>

</head>

<body>
<div id=\"pai\">
    <div id=\"filho\">
        teste de drag
    </div>      
</div>
</body>
</html>

我已经进行了搜索和测试，但即使是这个简单的示例，我似乎也无法使用。如在jquery draggable \的网页上所述，该控件确实具有一个“ create \”方法，可以通过在初始化以后将其与绑定相关联来调用该方法。我尝试两种方法均未成功。我正在使用jquery v1.4.2和UI v1.8.1。任何帮助表示赞赏。

解决方法

我认为应该是：

$(document).ready(function(){                              

    $(\"#filho\").bind(\"dragcreate\",function(event,ui) {
        alert(\"VAAAAAAAAAAAI!\");
    });
    $(\"#filho\").draggable();
});

首先绑定事件，然后创建可拖动对象。 jQuery UI版本更新不适用于低于1.8.7的JQueryUI版本。因此，您还需要将JQueryUI版本升级到较新的版本。正如弗雷德里克·哈米迪（FrédéricHamidi）在回答评论中指出的那样。 , 为什么不将功能添加到可拖动的初始化器中：

<script type=\"text/javascript\">

$(document).ready(function(){                           

    $(\"#filho\").draggable({
create: onCreate
});

function onCreate(event,ui){
alert(\"VAAAAAAAAAAAI!\");
}


});
</script>

这应该得到与您要求的结果相同的结果 , 在我看来，唯一缺少的是所需JS的正确引用。 =）加： <script src=\"http://code.jquery.com/jquery-1.10.2.js\"></script> <script src=\"http://code.jquery.com/ui/1.11.2/jquery-ui.js\"></script> 代替： <script src=\"js/jquery.js\"></script> <script src=\"js/jquery-ui.js\"></script> 我获取了您的代码，并切换了JS参考。有效！希望对您有帮助。