javascript - Use jQuery draggable and resizable to draw elements

I am trying to figure out how to draw a div using the draggable and resizable jQuery libraries. I found this Which is pretty nice but I really want this functionality to work with the mentioned libraries. To be more specific I want to be able to create a draggable element and drag(resize) it all in one shot. Is this possible?

EDIT: Perhaps I need to do something when the 'create' event happens in draggable or resizable? Do I need to somehow put my mouse on the resizable corner thingy? resizable doesn't seem to turn on until you actually lift your mouse and then press and drag on the resize corner. Here's the code I have now:

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

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

Share edited Oct 6, 2012 at 14:58 asked Oct 6, 2012 at 14:46 Roman Epicnerd Sharf 4276 silver badges15 bronze badges

See stackoverflow./a/19768036/1300910 – huysentruitw Commented Nov 4, 2013 at 18:28

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

I would approach this differently - I would use something like the jQueryUI selectable ponent, which already provides the boxing method. It has start and stop events which expose the mouse coordinates. Based on that, you can create a div on the stop event with the required mouse coordinates, and then add resizable and draggable to that div.

That's how I'd do it, anyway.

Your other option would be to do exactly what you're doing, and try using jQuery trigger(), like so:

 $('.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.
 });

This seems like it should work, but there may be some issues (I ran into a thread here from 2008). This might help put you on the right path, though. Good luck.

Ok I finally figured it out. I used selectable() as per @lunchmeat317's suggestion. I was able to capture the mouse positions during selectable's events: 'start' and 'stop' create a div with the right width and height and position. Here's the jsfiddle

Dragging and resizable div's can be easy made with the jquery ui library.

You could try this example. Download the latest JQuery and JQuery ui libs and adjust the source paths in the example. For resizing you can use the resize function.

<!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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744907750a4600359.html

javascript - Use jQuery draggable and resizable to draw elements - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Use jQuery draggable and resizable to draw elements - Stack Overflow

3 Answers 3

相关推荐