drag a div into existence

Question

I have a selection on a canvas, that I can drag and resize when it´s there.
I also can make it visible when I drag on the empty canvas.

But how do I make it visible and instantly have the bottom-right corner "in my hand" (for resizing); i.e. can I pass the drag event from the canvas to a resize event on the selection?
Is there a way with jQuery or do I have to make my own?

<div id="canvas" style="position:relative;width:500px;height:500px"
        draggable="true" onDragStart="initSelection(event)">
    <div id="selection" style="border:1px dashed gray;position:absolute;display:none"></div>
</div>

$('#selection').draggable({containment:'parent'}).resizable({containment:'parent'});

function initSelection(e){
    if ('none'==$('#selection').css('display'))
    {
        var q=$('#canvas').offset();
        $('#selection')
            .css('left', e.clientX-q.left)
            .css('top', e.clientY-q.top)
            .css('width',10).css('height',10)
            .css('display','block')
        ;
    }
}

I suspect that this can be done, using CSS `position`. Will try to make an example, but also your question is a little unclear. — Twisty, Jul 12 '16 at 18:16
Ok, I think I see what you're trying to do. Here is a jsfiddle of your code: https://jsfiddle.net/Twisty/vkLjn0gL/ - I think you need to take one route or the other, not both at once. a) resize the div with CSS based on the `mousedown` / `mouseup` events and mouse `x` and `y`. b) make it resizable up front and enable/start the resize event tied to the mousemove until done and then make it draggable. — Twisty, Jul 12 '16 at 18:29
@Twisty: tried that with `ondrag` and `ondragend` ... no success yet — Titus, Jul 12 '16 at 19:27
@Twisty: Make your comment an answer please. The initilization works with `mousedown`, `mousemove` and `mouseup`. Only the `handles` setting seems to be ignored now. — Titus, Jul 12 '16 at 20:20
got it. (http://stackoverflow.com/questions/23513019/jquery-resizable-handles-setter-not-working helped) — Titus, Jul 12 '16 at 20:39

Twisty · Answer 1 · 2016-07-12T22:24:18.213

I think I see what you're trying to do.

Testing here: jsfiddle.net/Twisty/vkLjn0gL

I think you need to take one route or the other, not both at once.

resize the div with CSS based on the mousedown / mouseup events and mouse x and y.
make it resizable up front and enable/start the resize event tied to the mousemove until done and then make it draggable

I got this far when you posted that you found an answer: https://jsfiddle.net/Twisty/vkLjn0gL/5/

$(function() {
  $("#canvas").on("dragstart", initSelection);
  $("#canvas").on("mousemove", resize);
  $("#canvas").on("mouseup", function() {
    allowResize = false;
  });
  var allowResize = false;
  /*
  $('#selection').draggable({
    containment: 'parent'
  }).resizable({
    containment: 'parent'
  });
  */

  function initSelection(e) {
    if ('none' == $('#selection').css('display')) {
      var q = $('#canvas').offset();
      $('#selection')
        .css('left', e.clientX - q.left)
        .css('top', e.clientY - q.top)
        .css('width', '10px').css('height', '10px')
        .css('display', 'block');
      allowResize = true;
    }
  }

  function resize(e) {
    if (allowResize) {
      //console.log("MouseMove: ", e);
      var w = $("#selection").width(),
        h = $("#selection").height(),
        q = $("#canvas").offset(),
        px = 0,
        py = 0;
      px = e.clientX - q.left;
      py = e.clientY - q.top;
      console.log("Width: ", (w + px), " Height: ", (h + py));
      $("#selection").css({
        width: (w + px) + "px",
        height: (h + py) + "px"
      });
    }
  }
});

Update 1

Few fixes to mouse tracking:

https://jsfiddle.net/Twisty/vkLjn0gL/6/

function resize(e) {
    if (allowResize) {
      //console.log("MouseMove: ", e);
      $("#canRes").html(allowResize);
      $("#cx").html(e.clientX - $("#canvas").offset().left);
      $("#cy").html(e.clientY - $("#canvas").offset().top);
      $("#ox").html($("#selection").width());
      $("#oy").html($("#selection").height());
      var w = $("#selection").width(),
        h = $("#selection").height(),
        q = $("#canvas").offset(),
        o = $("#selection").position();
        px = 0,
        py = 0;
      if (w > $("#canvas").width() + q.left) {
        return false;
      }
      if (h > $("#canvas").height() + q.top) {
        return false;
      }
      px = e.clientX - q.left - o.left;
      py = e.clientY - q.top - o.top;
      $("#selection").css({
        width: px + "px",
        height: py + "px"
      });
    }
  }

Update 2

I think this will do all that you wanted if you're still looking: https://jsfiddle.net/Twisty/vkLjn0gL/7/

Updated to selection after mouseup

  $("#canvas").on("mouseup", function() {
    allowResize = false;
    $("#canRes").html(allowResize);
    $("#selection").draggable({
        containment: 'parent'
      })
      .resizable({
        containment: 'parent'
      });
  });

Update 3

Added the drag handle on initial sizing: https://jsfiddle.net/Twisty/vkLjn0gL/10/

drag a div into existence

1 Answers1