1

在这里，我添加了我正在使用的代码。一切正常，除了一件事。当我将“可拖动”放在可放置的 div 上时，有时它不会捕捉到可放置的。当我尝试将它放在可放置的内部、底部附近或左侧附近时，它不会折断和恢复。（因为 revert:"invalid"）我没有在 droppable div 中添加任何填充，所以这不会是问题。

我非常希望有人可以帮助我解决这个问题，因为我现在遇到了这个问题并且无法继续这个项目。

<style>

#wrapper{
width:1024px;
height:768px;
background-image:url(img/bg.jpg);
}

#draggable1.ui-draggable-dragging,
#draggable1.dropped1 { 
-webkit-transform: rotate(-45deg);
}

#draggable1{
top:400px;
left:40px;
}

#draggable2.ui-draggable-dragging,
#draggable2.dropped2 { 
-webkit-transform: rotate(45deg); 
}

#draggable2 { 
top:300px;
left:40px;
}

#draggable3 { 
top:-100px;
left:40px;
}

#droppable1 { 
position:relative;
top:132px;
left:116px;
width:695px; 
height:150px;
-webkit-transform: rotate(-45deg); 
opacity:0.4;
background-color: #666;
}

 #droppable2 { 
position:relative;
top:-584px;
left:386px;
width:495px; 
height:50px;
padding:6px;
-webkit-transform: rotate(45deg); 
opacity:0.4;
background-color: #666;
}


h3 { 
clear: left; 
}

</style>




<script>

$(function() {
var itemNummer = 1;



$( "#draggable1" ).draggable({ revert: "invalid", cursorAt: { left: 200 }  })
$( "#draggable2" ).draggable({ revert: "invalid", cursorAt: { left: 200 } });
$( "#draggable3" ).draggable({ revert: "invalid" });   

//----------------------------------------------------------------------------

$( "#droppable1" ).droppable({
    accept: "#draggable1",
    tolerance: "fit",
     containment: false,

        drop: function( event, ui ) {
          var dropped = ui.draggable;

    $(dropped).css({top: "300px",left: 50})

              $(dropped).addClass('dropped1');

//----------------------------------------------------------------------------

$( "#droppable2" ).droppable({
    accept: "#draggable2",
    tolerance: "fit",

        drop: function( event, ui ) {
          var dropped = ui.draggable;

              $(dropped).addClass('dropped2');

//----------------------------------------------------------------------------

$( "#droppable3" ).droppable({
    accept: "#draggable3",
    tolerance: "fit",

        drop: function( event, ui ) {
          var dropped = ui.draggable;

              $(dropped).addClass('dropped3');


}
});

}
});

}
});

 });
</script>
</head>




<body>

<div id="wrapper">

<img class="draggable" id="draggable1" src="img/bigl1.png">
<div id="droppable1" align="center" valign="center></div>

<img class="draggable" id="draggable2" src="img/bigr1.png"></div>
<div id="droppable2"></div>

<img class="draggable" id="draggable3" src="img/bevest.png"></div>
<div id="droppable3"></div>

</div>

</body>
</html>
4

0 回答 0