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

ねえ、要素をドロップしたときに何が起こるかを指定する必要があります。ドラッグ可能なものをドロップ可能なものに挿入したい場合は、このアクションを記述する必要があります。

jquery-ui doc からのソース:

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

ドロップすると、ドラッグ可能な要素のテキストを含むリストに要素が追加されます。

于 2012-10-04T13:19:16.357 に答える