Я тестирую с помощью jQuery draggables и droppables и у меня есть вопрос о поведении при наведении мыши на droppable и клонах draggable.
В документации сказано, что перетаскиваемый элемент должен перекрывать dropbleable как минимум на 50% для срабатывания сверх-события (допуск по умолчанию).Это работает точно так же, как описано, если я перетаскиваю сам элемент.
Если я перетаскиваю клон элемента, правило 50% не работает.В этом случае клон должен полностью перекрывать предмет, если я перетаскиваю вертикально сверху.Если я перетаскиваю клона с левой стороны, событие наведения произойдет очень рано на 10%.
Как это происходит?
$("#eins").draggable({
helper: "clone",
opacity: 0.7,
drag: function(event,ui) {
$(ui.helper).addClass("clone")
},
stop: function (event, ui) {
console.log("Dragging stoped")
}
})
$("#zwei").droppable({
classes: {"ui-droppable-hover": "draggableHover"},
tolerance: "intersect",
over: function(event, ui) {
console.log("hover")
},
drop: function (event, ui) {
console.log("dropped")
}
})
#eins, .clone {
background: coral;
height: 100px;
width: 100px;
margin: 0px;
}
#zwei {
background:lightgreen;
height:100px;
width: 100px;
margin: 0px;
}
.draggableHover {
background: rgb(230, 250, 230) !important;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="eins">
eins
</div>
<div id="zwei">
zwei
</div>