В продолжение вопроса Как переместить элемент перетаскивания в определенную позицию, когда он расположен над холстом? возник другой вопрос: при реализации нескольких анимированных элементов Div они все реагируют, если анимация запускаетсят.е. если один div находится над желтым контейнером.Но должен реагировать только тот, кто находится над желтым контейнером.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
#container1 {
width: 200px;
height: 200px;
position: absolute;
background: yellow;
top: 100px
}
#container2 {
width: 200px;
height: 200px;
position: absolute;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
#div2 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: blue;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<div class="draggable" id="div1"></div>
<div class="draggable" id="div2"></div>
<!--<div id="animateBtn">Animate</div>-->
<div type="image" align="bottom" width="45px" src="refresh.png" onClick="window.location.href=window.location.href">
<script>
$(document).ready(function( event, ui ) {
$('#div1').draggable();
$('#container1').droppable({
drop: function() {
$('#div1').animate({top:"100px", left:"100px"});
}
});
});
$(document).ready(function(event, ui) {
$('#div2').draggable();
$('#container2').droppable({
drop: function() {
$('#div2').animate({top:"100px", left:"100px"});
}
});
});
var nodeList = document.getElementsByClassName('draggable');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
}, false);
}
</script>
</body>
</html>
Есть ли решение о том, как анимировать только один div, расположенный над желтым div?Пытался использовать accept: '# div1', который я не мог заставить работать, пока ...