У меня есть следующий пример перетаскивания изображений в jQuery.Это хорошо работает (спасибо!).
Мой следующий вопрос ... как я могу иметь, например, 10 различных областей перетаскивания вместо одной, но с сохранением той же функциональности?
Я думал, что смогу скопировать и вставить 10 раз функцию перетаскивания, но наверняка это не очень хорошая практика.Должен ли я также получить 10 id сбрасывания идентификаторов (т. Е. Div id = "drop1", div id = "drop2" ...)?
Любая помощь, пожалуйста?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".draggable").draggable({
cursor: "crosshair",
revert: "invalid",
helper: 'clone'
});
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
$("#drop").empty();
var check = 0;
// $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!elementMouseIsOver.classList.contains("clone")) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
// dropped.clone().appendTo(droppedOn);
var clone = dropped.clone().addClass("clone");
//clone[0].id = 'test';
clone.appendTo(droppedOn);
}
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
$("#drop").sortable();
$("#origin").droppable({
accept: ".draggable",
drop: function(event, ui) {
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}});
});
</script>
<title>Drag N Drop</title>
<style>
#origin
{
/* background-color: lightgreen; */
position: relative;
}
#drop {
width: 50px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.over {
border: solid 5px purple;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="origin" class="fbox">
<?php
$sql2 = "SELECT *
FROM players
LIMIT 10";
$res2 = mysqli_query($conexion,$sql2);
$cont1 = 0;
while( $row2 = mysqli_fetch_array( $res2 ) )
{
$cont1++;
?>
<img id="<?php echo $row2["id"];?>" class="draggable" src="images/players/<?php echo $row2["name"]; ?>.png" width="50" height="50">
<?php
}
?>
</div>
<div id="drop" class="fbox"></div>
</div>
</body>
Спасибо, такмного заранее!