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;

@Praveen Kumar

Answer 2

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

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

示例

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

扩展此插件并在complete功能中，您可以将其设为textarea。

Answer 3

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

使用jQuery ui api。

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

Javascript中的照片标记

3 个答案: