jquery拖放功能

时间:2012-08-06 06:47:07

标签: jquery

我正在使用jquery执行拖放功能。我得到了“draggable”方法找不到错误。 脚本如下

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#draggable").draggable({
            start: function (event, ui) {
                // flag to indicate that we want to remove element on drag stop
                ui.helper.removeMe = true;
            },
            stop: function (event, ui) {
                // remove draggable if flag is still true
                // which means it wasn't unset on drop into parent
                // so dragging stopped outside of parent
                if (ui.helper.removeMe) {
                    ui.helper.remove();
                }
            },
            // move back if dropped into a droppable
            revert: 'valid'
        });

        $("#droppable").droppable({
            drop: function (event, ui) {
                // unset removeMe flag as child is still inside parent
                ui.helper.removeMe = false;
            }
        });
    });
</script>

这是html

<div id="droppable" style="border: 1px">
    <p id="draggable">
        Drag me!</p>
</div>

2 个答案:

答案 0 :(得分:2)

您需要jQuery UI Lib:http://jqueryui.com/demos/draggable/

答案 1 :(得分:0)

您需要包含jQuery UI(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js)。

拖放功能仅包含在jQuery UI(或其他插件)中:http://jqueryui.com/

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<!-- Include here like -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!-- That's it -->
<script type="text/javascript">
<!-- ... continue -->
相关问题