it-swarm.com.ru

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

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

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

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

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

30
Jeet

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

HTML:

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

CSS:

[draggable=true] {
    cursor: move;
}

.resizable {
    overflow: scroll;
    resize: both;
    max-width: 300px;
    max-height: 460px;
}

Демо

38
Web_Designer

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

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

И если вы не возражаете против использования какой-нибудь замечательной библиотеки, я бы посоветовал вам попробовать Драгула .

21
Alvaro

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

$('#drag_me').draggable();
13
Dominik Schreiber

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

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

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

8
Quentin

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

HTML:

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

CSS:

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

Поддерживается только браузерами webkit, такими как Safari или Chrome, но это хороший способ заставить его работать, используя только CSS.

HTML5-атрибут draggable устанавливается только для обеспечения его работы для других браузеров.

Вы можете найти больше информации здесь: http://help.dottoro.com/lcbixvwm.php

4
Alberto Carrasco García

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

http://jqueryui.com/draggable/

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

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

Опции: 

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