1

我一直在浏览这个网站和我能找到的所有 jQuery 示例以获得答案，但似乎找不到足够匹配的东西。我的 html/css/script 位于此处。我有四个图像（在 div 内），以及四个相应的 div 用于放置图像。我的图像拖动，并将放在页面上的任何位置，但在分配的 div 中。我的 test.html 页面中包含两个脚本。第一个脚本使可放置的 div 变高并更改颜色，但第二个脚本我修改了基本的 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