Сделать Div Draggable с помощью CSS

Я хочу, чтобы мой тег div с id "drag_me" перетаскивался до длины 300 пикселей слева и 460 пикселей сверху, только с использованием CSS.

Я также хочу сделать его изменчивым. Снова такое же условие, как и выше, т.е. нет Javascript или jquery.

Может ли кто-нибудь предложить решение для этого...

Спасибо заранее всем

Ответ 1

Это лучшее, что вы можете сделать без JavaScript:

[draggable=true] {
  cursor: move;
}

.resizable {
  overflow: scroll;
  resize: both;
  max-width: 300px;
  max-height: 460px;
  border: 1px solid black;
  min-width: 50px;
  min-height: 50px;
  background-color: skyblue;
}

<div draggable="true" class="resizable"></div>

Ответ 2

Вы можете взглянуть на HTML 5, но я не думаю, что вы можете ограничить область внутри, которую вы можете перетащить, только пункт назначения:

http://www.w3schools.com/html/html5_draganddrop.asp

И если вы не против использования какой-либо большой библиотеки, я бы посоветовал вам попробовать Dragula.

Ответ 3

Только с использованием методов CSS это мне не кажется. Но вы можете использовать jqueryui draggable:

$('#drag_me').draggable();

Ответ 4

CSS предназначен для описания представления документов. Он имеет несколько функций для изменения этой презентации в реакции на взаимодействие с пользователем (прежде всего :hover для указания того, что вы сейчас указываете на что-то интерактивное).

Создание чего-то перетаскиваемого - это не просто вопрос презентации. Он прочно находится на территории логики интерактивности, которая обрабатывается JavaScript.

То, что вы хотите, не достижимо.

Ответ 5

Вы можете сделать это сейчас, используя свойство CSS -webkit-user-drag:

#drag_me {
  -webkit-user-drag: element;
}

<div draggable="true" id="drag_me">
  Your draggable content here
</div>

Ответ 6

Draggable div not possible only with CSS, если вы хотите перетащить div, вам нужно будет использовать javascript.

http://jqueryui.com/draggable/

Ответ 7

$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });

    // Pop up Window 
          <div id="dialog">
                        <table  id="tblOverlay">
                            <tr><td></td></tr>
                         <table>
           </div>

Опции:

handle: позволяет избежать проблем с полосой прокрутки. Иногда при перетаскивании указатель мыши будет придерживаться всплывающего окна.
прокрутка: Предотвратить всплывающее окно, чтобы выйти за пределы родительской страницы или из текущего экрана.

Ответ 8

После того, как я попытался сделать это самостоятельно, скопировав различные фрагменты кода из Qaru, я настоятельно рекомендую использовать библиотеку InteractJS, которая позволяет создавать перетаскиваемый и изменяемый размер div. (несколько) легко.