用Javascript标记照片

Question

我想知道的是，如何使用JavaScript制作拖拽选择框。

我的意思是，当你点击鼠标左键并拖动时，就会出现一个“电线”（我不知道它的名词），就像在桌面上一样。

单击并拖动图像，当发布搜索框时，应该出现在拖动区域下方。

我相信这是可能的，但我没有找到任何例子。所以，你能帮我吗？

Answer 1

有插件可以做到这一点。你可以尝试使用jQuery Resize Plugin来实现你想要的。

aeImageResize是一个jQuery插件来动态调整的图像而不扭曲的比例。

例

$(function() { 
    $(".resizeme").aeImageResize({ height: 250, width: 250 }); 
}); 

扩展这个插件，并在complete功能，你可以把它作为一个文本。

Answer 2

我认为它可以像做这种

function getCursorPosition(e) 
{ 
e = e || window.event; 
if (e) 
    { 
    if (e.pageX || e.pageX == 0) return [e.pageX,e.pageY]; 
    var dE = document.documentElement || {}; 
    var dB = document.body || {}; 
    if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0),e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)]; 
    } 
return null; 
} 

function mousedown(e) 
{ 
var mxy = getCursorPosition(e); 
var box = document.getElementById("sel_box"); 
box.orig_x = mxy[0]; 
box.orig_y = mxy[1]; 
box.style.left = mxy[0]+"px"; 
box.style.top = mxy[1]+"px"; 
box.style.display = "block"; 
document.onmousemove = mousemove; 
document.onmouseup = mouseup; 
} 

function mousemove(e) 
{ 
var mxy = getCursorPosition(e); 
var box = document.getElementById("sel_box"); 
box.style.width = (mxy[0]-box.orig_x)+"px"; 
box.style.height = (mxy[1]-box.orig_y)+"px"; 
} 

function mouseup(e) 
{ 
var box = document.getElementById("sel_box"); 
box.style.display = "none"; 
box.style.width = "0"; 
box.style.height = "0"; 
document.onmousemove = function(){}; 
document.onmouseup = function(){}; 
} 

document.onmousedown =鼠标按下;

@Praveen库马尔

Answer 3

URL链接： - http://jqueryui.com/draggable/

使用jQuery UI API。

这是最好的阻力选择技术..