Javascript用mousemove绘制div

Question

First the example:

http://jsbin.com/hifebiqu/1/

I can draw to the right and to the bottom. When i try to move my mouse to the left or to the top over the created element, it's blocking the image's mousemove event.

I want to draw to the every direction i want.

What am i missing?

See code here:

Js:

function pixelToPercent(elem, type){
        switch(type) {
            case "w":
                return (100 * elem.width()) / elem.parent().width();
            case "h":
                return (100 * elem.height()) / elem.parent().height();
            case "x":
                return 100 * (elem.position().left) / elem.parent().width();
            case "y":
                return 100 * (elem.position().top) / elem.parent().height();
        }
    }

    function percentToPixel(elem, type){
      var pos = elem.position();

        switch(type) {
            case "w":
                return elem.width();
            case "h":
                return elem.height();
            case "x":
                return pos.left;
            case "y":
                return pos.top;
        }
    }

$(function(){
  $('.drbox').draggable({
    containment: "parent",
    start: function( e, ui ) {
      var pos = ui.position;
      $(this).css({
        left: pos.left,
        top: pos.top
      });
    },
    drag: function( e, ui ) {

    },
    stop: function( e, ui ) {
      $(this).css({
        left: pixelToPercent($(this), "x") + "%",
        top: pixelToPercent($(this), "y") + "%"
      });
    }
  }).resizable({
    containment: "parent",
    resize: function(e, ui) {

    },
    stop: function(e, ui) {
      var elem = ui.element;
      elem.css({
        width: pixelToPercent(elem, "w") + "%",
        height: pixelToPercent(elem, "h") + "%"
      });
    }
  });

  $(document).on('mousedown', '.drbox > .ui-resizable-handle', function(){
    var $parent = $(this).parent();

    $parent.css({
      left: percentToPixel($parent, "x"),
      top: percentToPixel($parent, "y")
    });
  });

  $(document).on('mousedown', '#uploader > img', function(e) {
    var $t = $(this),
        $x = e.offsetX,
        $y = e.offsetY,
        $b = $('<div />', {'class': 'drbox'});

    $b.appendTo($('#uploader')).prop('id', 'box-'+$('.drbox').length);

    $t.on('mousemove', function(e) {
      var $mX = e.offsetX,
          $mY = e.offsetY,
          $w = Math.abs($mX - $x), //Width
          $h = Math.abs($mY - $y), // Height
          $top = $mY < $y ? $y - $h : $y,
          $left = $mX < $x ? $x - $w : $x;

      $b.css({
        width: (100 * $w) / $t.width()+'%',
        height: (100 * $h) / $t.height()+'%',
        left: (100 * $left / $t.width())+'%',
        top: (100 * $top / $t.height())+'%'
      });

    }).on('dragstart', function(e) {
      e.preventDefault();
    });
  });

  $(document).on('mouseup', '#uploader > img', function(e) {
    var $t = $(this);
    var $b = $t.siblings('.drbox:last');

    if(!$b.length) return;

    if(parseInt($b.width(), 10) < 10 || parseInt($b.height(), 10) < 10) {
      $b.remove();
      return;
    }

    $t.off();

    $b.draggable({
      containment: "parent",
      start: function( e, ui ) {
        var pos = ui.position;
        $(this).css({
          left: pos.left,
          top: pos.top
        });
      },
      drag: function( e, ui ) {

      },
      stop: function( e, ui ) {
        $(this).css({
          left: pixelToPercent($(this), "x") + "%",
          top: pixelToPercent($(this), "y") + "%"
        });
      }
    }).resizable({
      containment: "parent",
      resize: function(e, ui) {

      },
      stop: function(e, ui) {
        var elem = ui.element;
        elem.css({
          width: pixelToPercent(elem, "w") + "%",
          height: pixelToPercent(elem, "h") + "%"
        });
      }
    }).append($('.drbox').length);
  });
});

Css:

#uploader{
  position:relative;
  border:5px dashed #e1e1e1;
  padding:0;
  width:850px;
  height:315px;
}

.drbox{
  position:absolute;
  background: rgba(255,255,255, .4);
}

Html:

<!DOCTYPE html>
<html>
<head>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="uploader">
        <img src="http://99covers.com/covers/watermark/47104.jpg" />
    </div>
</body>
</html>

Answer 1

This one may work for you a little better: http://jsbin.com/hifebiqu/8

It's not perfect either, but lets you add boxes in all directions. Basically moved the mouseup to inside the mousedown method, and added mouseout as a trigger as well.

$(document).on('mousedown', '#uploader > img', function(e) {
    var $t = $(this),
        $x = e.offsetX,
        $y = e.offsetY,
        $b = $('<div />', {'class': 'drbox'});

    $b.appendTo($('#uploader')).prop('id', 'box-'+$('.drbox').length);

    $t.on('mousemove', function(e) {
        var $mX = e.offsetX,
            $mY = e.offsetY,
            $w = Math.abs($mX - $x), //Width
            $h = Math.abs($mY - $y), // Height
            $top = $mY < $y ? $y - $h : $y,
            $left = $mX < $x ? $x - $w : $x;

        $b.css({
            width: (100 * $w) / $t.width()+'%',
            height: (100 * $h) / $t.height()+'%',
            left: (100 * $left / $t.width())+'%',
            top: (100 * $top / $t.height())+'%'
        });

    }).on('dragstart', function(e) {
        e.preventDefault();
    });

    // moved mouseup method inside here, and added mouseout event listener
    $t.on('mouseup mouseout', function(e) {
        var $t = $(this);
        var $b = $t.siblings('.drbox:last');

        if(!$b.length) return;

        if(parseInt($b.width(), 10) < 10 || parseInt($b.height(), 10) < 10) {
            $b.remove();
            return;
        }

        $t.off();

        $b.draggable({
            containment: "parent",
            start: function( e, ui ) {
                var pos = ui.position;
                $(this).css({
                    left: pos.left,
                    top: pos.top
                });
            },
            drag: function( e, ui ) {

            },
            stop: function( e, ui ) {
                $(this).css({
                  left: pixelToPercent($(this), "x") + "%",
                  top: pixelToPercent($(this), "y") + "%"
                });
            }
        }).resizable({
            containment: "parent",
            resize: function(e, ui) {

            },
            stop: function(e, ui) {
                var elem = ui.element;
                elem.css({
                    width: pixelToPercent(elem, "w") + "%",
                    height: pixelToPercent(elem, "h") + "%"
                });
            }
        }).append($('.drbox').length);
    });
});