Имеется коробка с желтым цветом, то есть html object. Поле можно перетаскивать с помощью Jquery. Когда я добавил overflow: scroll; на CSS, он не перетянул из прокрутки в div.
В stackoverflow есть некоторые проблемы. Но это не решило мою проблему.
$(document).ready(function() {
$("#box1").draggable({
snap: ".img_truck_case,#box1",
snapTolerance: 10,
containment: ".wrapper",
revert: true
});
$(".img_truck_case").droppable({
drop: function(event, ui) {
$("#box1").draggable({
revert: false
})
}
})
});
.wrapper {
width: 700px;
height: 550px;
margin-top: 6px;
border: 2px solid;
margin-left: 100px;
}
#truck {
position: absolute;
width: 400px;
height: 520px;
left: 300px;
top: 10px;
border: 1px solid;
}
.left_box_side {
position: relative;
float: left;
width: 100px;
height: 220px;
left: 20px;
top: 2px;
border: 1px solid;
overflow: scroll;
}
.box {
width: 60px;
height: 57px;
color: black;
text-align: center;
vertical-align: middle;
line-height: 57px;
cursor: default;
z-index: 9;
border: 1px solid;
background-color: #FAD7A0;
}
#box1 {
left: 20px;
top: 50px;
}
.img_truck_case {
position: absolute;
width: 175px;
height: 133px;
top: 117px;
left: 107px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js" integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" crossorigin="anonymous"></script>
<body>
<div class="wrapper">
<div class="left_box_side">
<div id="box1" class="box">
</div>
</div>
<div id="truck">
<img class="img_truck_first" />
<img class="img_truck_second" />
<img class="img_truck_case" />
</div>
</div>
</body>
Вот JSFiddle .
Как можно решить эту проблему?