jquery图像热点

Question

我正在寻找一个jquery脚本，让我添加热点的图像。他们的工作方式我想是这样的。

我可以将图像拖动到图像上的某个位置。位置=拖动的图像X、Y坐标是可检索的。

就是这样，有没有人知道一个脚本可以帮助我做到这一点？

Answer 1

你可以在没有任何插件的情况下做到这一点，只要你涵盖了一些细节。首先，让我们设置我们的draggable和droppable元素的绝对定位：

.draggable, .droppable { position:absolute; }
.draggable { z-index:51; }
.droppable { z-index:50; }

然后，让我们设置我们的图像并禁用默认的拖动行为：

<img src="small_ball.png" class="draggable" ondragstart="return false" />
<br><br>
<img src="cartoon-beach.gif" class="droppable" ondragstart="return false" />

现在，我们只需要在可拖动元素上使用鼠标按下的处理程序：

var curDrag;

$(document).bind('mousedown', function (e) {
    if ($(e.target).hasClass('draggable')) {
        curDrag = e.target;
    }
});

它将当前拖动的对象存储在一个全局变量中，现在我们将为可拖放图像上的mouseup事件添加一个处理程序：

$(document).bind('mouseup', function (e) {
    if (curDrag && $(e.target).hasClass('droppable')) {
        $(curDrag).css({
            'left': e.pageX,
            'top' : e.pageY
        });
        curDrag = null;
    }
});

因此，如果我们将鼠标放在可拖动区域上，我们将只移动被拖动的图像。这不是跨浏览器兼容的，因为您需要为IE实现clientX和clientY，但我将让您弄清楚如何做到这一点。

Try dragging the beach ball around yourself.

Answer 2

这应该可以让你开始学习了。您可以运行此演示here。

HTML非常简单。我们将有一个可拖动的元素和一个指示其位置的。

<!-- This is our position indicator: -->
<div id="status">
    <p>Pixels from top: <span id="top_pos"></span></p>
    <p>Pixels from left: <span id="left_pos"></span></p>
</div>

<!-- ..and this is the draggable element: -->
<div id="draggable" class="ui-widget-content">
    <p>x</p>
</div>

现在来看Javascript代码。它使用jQuery和jQueryUI。

$(function() {
    $("#draggable").draggable();

    // Set status indicators to display initial position.
    $("#top_pos").text($("#draggable").position().top);
    $("#left_pos").text($("#draggable").position().left);

    // On dragstop events, update position indicator.
    $("#draggable").bind("dragstop", function(event, ui) {
        $("#top_pos").text(ui.position.top);
        $("#left_pos").text(ui.position.left);
    });

});

只要用户在拖动可拖动元素后松开鼠标，就会触发dragstop事件。

传递给回调函数的ui对象包含有关可拖动元素的先前位置等的附加信息。