用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。

這是最好的阻力選擇技術..