1

ここに、私が使用しているコードを追加しました。1 つのことを除いて、すべて正常に動作します。「ドラッグ可能」をドロップ可能な div にドロップすると、ドロップ可能にスナップしないことがあります。ドロップ可能な内部、下部または左側の近くにドロップしようとすると、スナップして元に戻りません。（元に戻すため：「無効」）ドロップ可能な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