1

Здравствуйте.

Есть код js, с помощью которого можно перемещать элементы, но вот никак не пойму, как ограничить область перемещения элемента, например, в пределах конкретного блока? Скажите, пожалуйста, как это сделать на чистом javascript.

1

2 ответа 2

5

Element.prototype.makeDraggable=function(){
  var o=this
  o.onmousedown=function(e){
    var offsetX=e.pageX-parseInt(o.style.left)
    var offsetY=e.pageY-parseInt(o.style.top)
    document.onmousemove=function(e) {
      o.style.left=Math.max(Math.min(e.pageX-offsetX,o.parentNode.clientWidth-o.clientWidth),0)+'px'
      o.style.top=Math.max(Math.min(e.pageY-offsetY,o.parentNode.clientHeight-o.clientHeight),0)+'px'
    }
    document.onmouseup = function(e) {
      document.onmousemove=o.onmouseup=null
    }
  }
  o.ondragstart = function(){return 0}
}
document.getElementById('object1').makeDraggable()
#parent{
  position:absolute;
  top:10px;
  left:10px;
  background:yellow;
  width:300px;
  height:300px;
}
#object1{
  width:100px;
  height:100px;
  position:absolute;
  background:green;
}
<div id="parent">
  <div id="object1" style="left:10px;top:10px;"></div>
</div>

1

Если вы используете jQuery UI drag and drop, то вот вам такой пример из этого мануала.

За привязку к определённому контейнеру отвечает опция с значением:

 containment: parent
7
  • Я не использую JQuery!!! Хотелось бы на чистом js понять, как работает ограничение.
    – sew810i9
    30 авг 2014 в 7:58
  • Крутой какой :) какой способ D&D вы используете? HTML5? Или просто что-то самописное с mousedown и т.д.? В любом случае - когда элемент вне зоны, в которой можно таскать, просто не обновляйте его координаты.
    – zb'
    30 авг 2014 в 8:03
  • был бы крутой, не задавал такие вопросы! Такой код у меня jsfiddle.net/acchtbcb но что то на jsfiddle не работает, в браузере все нормально. А может знаешь, плагины типа jquery draggable используют тот же принцип, по достижению определенного места, координаты перестаю обновляться?
    – sew810i9
    30 авг 2014 в 8:29
  • @sew810i9, и в чем проблема? Вы же знаете, когда у вас двигается элемент, границы того, что двигается, и границы поля. В чем проблема? Вот демо jsfiddle.net/acchtbcb/1 чтобы работало на jsfiddle
    – zb'
    30 авг 2014 в 8:56
  • А вообще, у вас там все неправильно :)
    – zb'
    30 авг 2014 в 10:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.