Используйте jQuery с возможностью перетаскивания и изменения размера для рисования элементов

Я пытаюсь понять, как нарисовать div, используя библиотеки jQuery с возможностью перетаскивания и изменения размера. Я нашел это, что довольно неплохо, но я действительно хочу, чтобы эта функциональность работала с упомянутыми библиотеками. Чтобы быть более конкретным, я хочу иметь возможность создавать перетаскиваемый элемент и перетаскивать (изменять размер) все за один раз. Это возможно?

РЕДАКТИРОВАТЬ: Возможно, мне нужно что-то сделать, когда событие «создать» происходит в перетаскиваемом или изменяемом размере? Нужно ли как-то наводить мышь на изменяемый угол? изменение размера, похоже, не включается, пока вы не поднимете мышь, а затем не нажмете и не перетащите угол изменения размера. Вот код, который у меня есть сейчас:

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });

javascript jquery-ui jquery-ui-draggable jquery-ui-resizable
person Roman Epicnerd Sharf    schedule 06.10.2012    source источник
comment
См. stackoverflow.com/a/19768036/1300910.   -  person huysentruitw    schedule 04.11.2013

Ответы (3)


arrow_upward
4
arrow_downward

Я бы подошел к этому по-другому - я бы использовал что-то вроде компонента jQueryUI selectable, который уже предоставляет метод упаковки . Он имеет события start и stop, которые раскрывают координаты мыши. Исходя из этого, вы можете создать div для события stop с необходимыми координатами мыши, а затем добавить к этому div изменяемый размер и перетаскивание.

Во всяком случае, я бы так поступил.

Другой вариант — сделать именно то, что вы делаете, и попробовать использовать jQuery trigger(), например :

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
    $('.gen-box').trigger('mousedown'); // This may activate the resize ability, but you may need to target the resize handle, instead of the full div.
 });

Похоже, это должно работать, но могут быть некоторые проблемы (я столкнулся с тредом здесь с 2008 г.). Однако это может помочь вам выбрать правильный путь. Удачи.

person jedd.ahyoung    schedule 06.10.2012
comment
Я думаю, вы правы. Selectable выглядит многообещающе. Я играю с ним сейчас, но я все еще не могу понять, оу :\ - person Roman Epicnerd Sharf; 06.10.2012

arrow_upward
1
arrow_downward

Хорошо, я наконец понял это. Я использовал selectable() согласно предложению @lunchmeat317. Мне удалось зафиксировать положение мыши во время событий selectable: «start» и «stop» создают div с правильной шириной, высотой и положением. Вот jsfiddle

person Roman Epicnerd Sharf    schedule 09.10.2012
comment
Кстати, с помощью этого метода вам нужно следить за тем, в каком направлении движется мышь, и добавлять дополнительную логику. В скрипке вы можете перетаскивать мышь вправо или влево, и это сделает div, но перетаскивание вверх не сработает, потому что для этого нет логики (пока). - person Roman Epicnerd Sharf; 10.10.2012

arrow_upward
0
arrow_downward

Перетаскивание элементов div и изменение их размера можно легко выполнить с помощью библиотеки пользовательского интерфейса jquery.

Вы можете попробовать этот пример. Загрузите последние библиотеки JQuery и JQuery ui libs и настройте исходные пути в примере. Для изменения размера вы можете использовать функцию изменения размера.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>

    <script type="text/javascript" src="/media/js/jquery-latest.js"></script>
    <script type="text/javascript" src="/media/js/jquery-ui-latest.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {        
        $( '#test' ).draggable();
      });
    </script>
  </head>

  <body>

    <div id="test" style="width: 100px; height: 50px; background-color: red;" >
      <p>Drag me</p>
    </div>

  </body>

</html>
person JvdBerg    schedule 06.10.2012
comment
Спасибо JVD. Однако это не проблема, с которой я сталкиваюсь. Мне нужно иметь возможность перетаскивать их, чтобы они не появлялись, когда документ готов. Вы знаете, как это можно сделать? - person Roman Epicnerd Sharf; 06.10.2012
comment
Вы хотите, чтобы div был скрыт при запуске страницы и отображался при определенном событии? - person JvdBerg; 06.10.2012
comment
Нет, я хотел бы создать его динамически, например, с помощью функции append(). - person Roman Epicnerd Sharf; 06.10.2012