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

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

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

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });
Источник

3 ответа

Решение

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

Источник

Я бы подошел к этому по-другому - я бы использовал что-то вроде 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 года). Это может помочь поставить вас на правильный путь, хотя. Удачи.

Источник

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

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

<!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>
Источник
Другие вопросы по тегам