0

我无法将 jquery 对话框中的图像拖放到放置区域...

图像可以拖动但不能拖放到放置区域的新位置...

掉落时它会向后移动...

我从jquery网站修改了代码，

任何人都可以帮助我....

我真的不知道如何修复这个错误......

<HTML>
    <head>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.24.custom.css" />
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>   
        <script type="text/javascript" src="jquery-ui-1.8.24.custom.min.js"></script>   
        <script type="text/javascript" src="jquery.easydrag.js"></script>   
        <style>
            #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 0px;}
        </style>
        <script>
            var draggableArguments={
                scope: "items",
                cursor: 'hand',
                revert:'invalid',
                helper:'clone',
                appendTo: '#droppable',
                scroll: false,
                containment: 'DOM',
                zIndex: 1500,
                addClasses: false,
            }
            $(function() {
                $( "#dialog" ).dialog({title: 'Some title', width:300, eight:600});
                $("#drag").draggable(draggableArguments);
                $( "#droppable" ).droppable()
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <div id="dialog" title="Basic dialog">
                <div id="drag">
                    <img src="low.gif"/>
                </div>  
            </div>
            <div id="droppable" class="ui-widget-header">
                <p>Drop here</p>
            </div>
        </div><!-- End demo -->
    </body>
</HTML>
4

2 回答 2

2

我更正了您的代码：

<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>   
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>   
<script>
var draggableArguments={
    cursor: 'hand',
    appendTo: '#droppable',
    scroll: false,
    containment: 'DOM',
    zIndex: 1500,
    addClasses: false
}
$(function() {
    $("#drag").draggable(draggableArguments);
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( ui.draggable ).remove();
            $( ui.draggable.html() ).appendTo( this );
        }
    });
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<div id="drag">
    <img src="low.gif"/>
</div>  
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
</body>
</HTML>
于 2012-10-04T13:41:23.403 回答
1

Hye，您需要指定放置元素时会发生什么：如果要将可拖动元素插入到可放置元素中，则需要编写此操作。

jquery-ui 文档的来源：

            drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }

放置时，它们会在列表中添加一个元素，其中包含可拖动元素的文本。

于 2012-10-04T13:19:16.357 回答