0

私のページには2つのdivがあります。1 つはドラッグ可能で、もう 1 つはドロップ可能です。

ドラッグ可能な div:

<div id='drag'>
    <div id='one'>11111</div>
    <div id='two'>22222</div>
<div>

ドロップ可能な div

<div id='drop'>

</div>

次のjQueryコードを使用して、ドラッグ可能なdivのドロップイベントでdiv ' drag 'の内容をdiv ' drop 'に追加しています。

$(function() {
        $( "#drag" ).draggable();
        $( "#drop" ).droppable({
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html();
            }
        });
    });

今私がやりたいことは、div ' two ' (div ' drag ' 内にある) の内容をユーザーに表示したくないということです。ただし、ユーザーが div 'drop' に div ' drag 'をドロップすると、div ' one ' と ' two 'の両方のコンテンツがdiv ' drop 'に追加されます。

したがって、ユーザーは div 'drag' のコンテンツを次のように表示する必要があります: (div 'two' は非表示)

111111

しかし、div 'drag' のドロップ後、div 'drop' の内容は次のようになります。

111111
222222

div ' one 'のコンテンツをユーザーから非表示にする方法を教えてください。ただし、ドロップ イベントでは引き続き使用します。

4

2 に答える 2

1

次のように、マークアップと js スクリプトをわずかに変更します。

<div id='drag' style="border:solid 1px blue;height:50px;">
    <div id='one'  >11111</div>
    <div id='two' ><span style="visibility:hidden;">22222</span></div>
</div>


<div id='drop' style="border:solid 1px red;height:50px;">

</div>

</p> 

$(document).ready(function() {
    $("#drag").draggable();

    $("#drop").droppable({
        drop: function(event, ui) {
            $(this).append(ui.draggable.text());
        }
    });
});​
于 2012-05-08T12:23:05.830 に答える
0

dragstopドラッグ可能な関数によって公開されたイベントを と組み合わせて使用​​しbindて、必要な機能を実現できます。

例：

$( "#drag" ).bind( "dragstop", function(event, ui) {
    $( this ).append( ui.draggable.html());
});
于 2012-05-08T12:07:50.567 に答える