Определение элемента, который дропнулся.
Есть два элемента которые могут перетаскиваться.
$( "#draggable,#draggable2" ).draggable(); Перетаскиваются на поле:
$( "#droppable" ).droppable({
accept: "#draggable,#draggable2";})
Как определить какой именно элемент был перетащен? Не где не могу найти ... Спасибо! |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>
.wrapper{margin:20px auto}
#block1,#droppable{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;height:335px ;min-width:100px}
.textBlock{cursor: pointer;border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
#droppable{
padding:0px;
width:335px;height:335px ;
background-color: #4169E1;
}
#droppable div{
width:40px;height:40px ;
background-color: #DEB887;
position: absolute;
}
</style>
<script type='text/javascript'>
$(window).load(function ()
{
$("#draggable,#draggable2").draggable();
$("#droppable").droppable(
{
drop: function (event, ui) {
alert(ui.draggable[0].id)
},
accept: "#draggable,#draggable2"}
)
}
);
</script>
</head>
<body>
<div class="wrapper">
<div id="block1" class="">
<div class="textBlock ui-state-default" id="draggable">draggable</div>
<div class="textBlock ui-state-default" id="draggable2">draggable2</div>
</div>
<div id="droppable" class="">перетащите сюда блоки</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:13. |