Question

我无法将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>

Answer 1

我更正了你的代码：

<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>

Answer 2

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

来自jquery-ui doc的来源：

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

当删除时，它们会在列表中添加一个带有可拖动元素文本的元素。

无法从jquery对话框中删除图像

2 个答案: