Сегодня мы рассмотрим, как предотвратить перетаскивание объектов из определенного DIV и перетаскивания функции адсорбции.
В прошлый раз мы говорили о нашем перетаскивании и падении, мы не можем вытащить из визуальной области. Исходя из этого, мы добавляем родительского Div, чтобы он не вытащил из родителей. Принцип такой же, как и раньше, он просто.
HTML -код:
<div id = "div2"> <div id = "div1"> </div> </div>
CSS -код:
<style type = "text/css"> #div1 {ширина: 100px; высота: 100px; Фон: красный; позиция: абсолютно; } #div2 {width: 400px; Высота: 300px; Фон: #cccccc; позиция: относительно; } </style>код JavaScript:
<script type = "text/javaScript"> // перетаскивать пустое div. Низкая версия Firefox имеет windows window.onload = function () {var Odiv = document.getElementById ("div1"); var Odiv2 = document.getElementById ("div2"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || событие; // хранить текущее местоположение div var odivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; if (Odivleft <0) {Odivleft = 0; } else if (odivleft> Odiv2.offsetWidth - Odiv.OffsetWidth) {OdiVleft = Odiv2.OffSetWidth - Odiv.OffSetWidth; } if (odivtop <0) {Odivtop = 0; } else if (odivtop> odiv2.offsetheight - Odiv.Offsetheight) {Odivtop = Odiv2.OffSetHeight - Odiv.OffsetHeight; } odiv.style.left = odivleft + 'px'; ODIV.Style.top = ODIVTOP + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; вернуть ложь; // заблокировать событие по умолчанию и разрешить ошибку Firefox}; }; </script>Рендеринги следующие:
Это просто.
Следующее, как сделать его автоматически поглощать.
На самом деле, это часто используется людьми. Например, когда в PS есть небольшое окно, перетаскивающее его на край страницы, оно автоматически прикрепляет его.
Как у нашего перетаскивания есть такая функция?
Это было фактически упоминалось во время упражнений раньше. Это все равно, что взять такси, и вы не можете позволить водителям точно парковаться туда. Он должен быть припаркован возле пункта назначения.
То же самое касается программы. Так же, как это почти время добраться туда, его можно назначить напрямую. Предположим, что объект, который я перетаскивал, находится в 50 % слева, я думаю, что он слева, и если он напрямую назначается 0, он будет автоматически адсорбировать.
Принцип очень прост, давайте посмотрим, как реализован код. Просто сделайте небольшую модификацию
<script type = "text/javascript"> window.onload = function () {var Odiv = document.getElementById ("div1"); var Odiv2 = document.getElementById ("div2"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || событие; varyivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; // Когда осталось менее 50, он будет автоматически 0. Это будет реализовать адсорбцию, если (Odivleft <50) {Odivleft = 0; } else if (odivleft> Odiv2.offsetWidth - Odiv.OffsetWidth) {OdiVleft = Odiv2.OffSetWidth - Odiv.OffSetWidth; } if (odivtop <0) {Odivtop = 0; } else if (odivtop> odiv2.offsetheight - Odiv.Offsetheight) {Odivtop = Odiv2.OffSetHeight - Odiv.OffsetHeight; } odiv.style.left = odivleft + 'px'; ODIV.Style.top = ODIVTOP + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; вернуть ложь; }; }; </script>В следующий раз мы поговорим о передовых приложениях, которые будут более ответственными и полезными. Наша функция перетаскивания была улучшена.
Например, перетаскивание изображений и выбор текста. Например, на странице перетаскивания есть только один Div, который мы сейчас используем, с которым мы не столкнемся с нормальной разработкой.
На самом деле, когда на странице что -то есть, какие проблемы произойдут с этим сопротивлением? ? ?
Будет решено в следующий раз ~ Пожалуйста, с нетерпением жду этого