Question

我正在寻找一个jquery脚本，它允许我为图像添加热点。我认为它的工作原理就是这样。

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

多数民众赞成，有没有人知道可以帮助我做到这一点的脚本？

Answer 1

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

HTML非常简单。我们有一个可拖动的＆lt; img＆gt;元素和＆lt; div＆gt;这表明了它的立场。

<!-- 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对象包含有关可拖动元素的先前位置的其他信息，等等。

Answer 2

Here's an example of the following.

只要您介绍几个细节，就可以在没有任何插件的情况下执行此操作。首先，让我们设置具有绝对定位的可拖动和可放置元素：

.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" />

现在我们只需要一个可拖动元素上的mousedown处理程序：

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.

jquery图像热点

2 个答案: