首先是例子:
我可以向右和向下绘制。当我尝试将鼠标移动到创建的元素的左侧或顶部时，它会阻止图像的 mousemove 事件。
我想画向我想要的每个方向。
我错过了什么？
请参阅此处的代码:
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>
最佳答案
这个可能更适合你一点:http://jsbin.com/hifebiqu/8
它也不完美，但可以让您在各个方向添加框。基本上将 mouseup 移动到 mousedown 方法内部，并添加 mouseout 作为触发器。
$(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);
});
});
关于Javascript 用 mousemove 绘制一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23930425/