Как сделать div перетаскиваемым с другим div'ом поверх него - PullRequest
Новая
       16

Как сделать div перетаскиваемым с другим div'ом поверх него

0 голосов
/ 02 июля 2018

У меня есть два div на вершине друг друга. Один для отображения границы, а другой для отображения изображения. Я использую метод jquery .draggable();, чтобы сделать div внизу перетаскиваемым. Проблема в том, что я не могу переместить div внизу. Если он установлен на display:none;, перетаскиваемый метод работает нормально. Это потому, что поверх него есть div.

HTML: 

<div id="editor-holder">
   <div id="border-holder"><img src="img/border.png"></div>
   <div id="image-holder"><img src="background-image.jpg"></div>
</div>

CSS: 

#editor-holder{
  width:400px;
  height:300px;
  position:relative;
  overflow:hidden;
}

#border-holder{
  position:absolute;
}
#border-holder img{
  width:100%;
}

#image-holder{
  position:absolute;
}
#image-holder img{
  width:100%;
}

Javascript: 

$( function() {
   $( "#image-holder" ).draggable();
});

Я хочу иметь возможность перетаскивать фоновое изображение без необходимости скрывать границу. Есть ли способ сделать это?

1 Ответ

0 голосов
/ 02 июля 2018

Добавьте pointer-events: none в CSS для элемента border. Это сделает его недоступным, и через него пройдут все события щелчка / перетаскивания.

...