1

私はこのサイトと、答えを得るために見つけることができるすべての jQuery の例を調べてきましたが、十分に一致するものを見つけることができないようです。私の html/css/script はhereにあります。4 つの画像 (div 内) と、画像をドロップするための 4 つの対応する div があります。私の画像はドラッグされ、ページ上のどこにでもドロップされますが、割り当てられた div 内にドロップされます。test.html ページには 2 つのスクリプトが含まれています。最初のスクリプトは、ドロップ可能な div をハイトして色を変更しますが、2 番目のスクリプトは基本的な jQuery 割り当てスクリプトを変更しましたが、このコードはまったく機能しません (ホバーまたはドロップしてもボックスが強調表示されません)。

メインのスクリプト コードは次のとおりです。

<script>
$(function() {
    $( "#ddt" ).draggable();
    $( "#ddt_droppable" ).droppable({
        accept: "#ddt",
        activeClass: "ui-state-hover",
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
            }
        });

   $( "#plant" ).draggable();
    $( "#plant_droppable" ).droppable({
        accept: "#plant",
        activeClass: "ui-state-hover",
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });

      $( "#beetle" ).draggable();
    $( "#beetle_droppable" ).droppable({
        accept: "#beetle",
        activeClass: "ui-state-hover",
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });

      $( "#bird" ).draggable();
    $( "#bird_droppable" ).droppable({
        accept: "#bird",
        activeClass: "ui-state-hover",
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});
</script>

CSSの最初のセット

#ddt{position:relative;float: right;width:100px;height:100px;left: 50px;top: 50px'}
#ddt_droppable{position: absolute;width:105px;height:150px;left: 50px;top:270px;}

関連ページコード

<div id="ddt_droppable"></div>
<div id="plant_droppable"></div>
<div id="beetle_droppable"></div>
<div id="bird_droppable"></div>
<div id="plant" class="ui-widget-content">              
<img src="Plant.png" height="100" width="100" align="center" />
</div>
<div id="ddt" class="ui-widget-content">
<img src="DDT.png"  height="100" width="100" align="center"/>
 </div>
 <div id="beetle" class="ui-widget-content">
 <img src="Beetle.png" height="100" width="100" align="center"/>
 </div>
4

0 に答える 0