Я хочу, чтобы пользователь мог перемещать элемент HTML внутри другого, перетаскивая мышью. (пример, переместите красный квадрат внутри желтый квадрат)Перетаскиваемые элементы HTML
<div style="width:100px;height:100px;background-color:yellow">
<div style="width:10px;height:10px;background-color:red">
</div>
</div>Вот пример использования простой и популярной библиотеки под названием Draggabilly, которая не требует JQuery.
window.onload = function() {
var draggie = new Draggabilly('.draggable', {
containment: true
});
};.container {
background-color: yellow;
height: 100px;
width: 100px;
}
.draggable {
background-color: red;
height: 10px;
width: 10px;
}<!-- Based on the Draggabilly containment example using jQuery - http://codepen.io/desandro/pen/azRmYv -->
<script src="https://npmcdn.com/[email protected]/dist/draggabilly.pkgd.min.js"></script>
<div class="container">
<div class="draggable"></div>
</div>Примечание: Если вы решили использовать JQuery, то JavaScript может быть упрощена:
$(function(){
$('.draggable').draggabilly({
containment: true
});
});
Существует некоторая поддержка перетаскивания в HTML5, но я думаю, чтобы получить что вы хотите, вам придется добавить в JavaScript фреймворк. На ум приходит что-то вроде Draggable в jQuery UI (https://jqueryui.com/draggable/). Все хорошо? –
Я буду использовать JS, хотя я бы хотел оставить код относительно коротким. Хотя я не буду использовать jQuery. –
нашел эту ссылку jsfiddle. чистый пример JS draggable. https://jsfiddle.net/tovic/Xcb8d/ –