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

【问题标题】：can't drop image from jquery dialog无法从 jquery 对话框中删除图像
【发布时间】：2012-10-04 13:02:04
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

【解决方案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>

【讨论】：

【解决方案2】：

嘿，您需要指定删除元素时会发生什么：如果你想将你的可拖动对象插入到可放置对象中，你需要编写这个动作。

jquery-ui 文档的来源：

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

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

【讨论】：