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

URLリンク： -http： //jqueryui.com/draggable/

jQueryuiapiを使用します。

これが最良のドラッグ選択手法です。

Answer 3

これを行うことができるプラグインがあります。jQuery Resize Pluginを使用して、目的を達成してみてください。

aeImageResizeは、比率を歪めることなく画像のサイズを動的に変更するjQueryプラグインです。

例

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

このプラグインを拡張してcomplete関数内で、テキストエリアとして作成できます。