javascript - Javascript 中的照片标记

Question

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

我的意思是，当您单击鼠标左键并拖动时，应该会出现一个“电线”（我不知道它的术语），就像在您的桌面上一样。

单击并拖动图像，释放时搜索框应出现在拖动区域下方。

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

Answer 1

我认为可以这样做

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 = mousedown;

@普拉文库马尔

Answer 2

网址链接：- http://jqueryui.com/draggable/

使用 jQuery ui api。

这是最好的拖动选择技术..

Answer 3

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

aeImageResize是一个 jQuery 插件，用于动态调整图像大小而不扭曲比例。

例子

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

扩展这个插件和complete功能，你可以把它做成一个textarea。