javascript — несколько областей перетаскивания для примера перетаскивания в jQuery

У меня есть следующий пример перетаскивания изображений в jQuery. Это хорошо работает (спасибо!).

Мой следующий вопрос: как я могу иметь, например, 10 различных областей перетаскивания вместо одной, но с одинаковой функциональностью?

Я думал, что смогу скопировать&вставьте 10-кратную функцию отбрасывания, но наверняка это не очень хорошая практика. Должен ли я также иметь 10 выпадающих идентификаторов div (т.е. 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>

Большое спасибо заранее!

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector