jquery图像热点

Question

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

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

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

Answer 1

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; 
    } 
}); 

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

$(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很简单。我们将有一个可拖动的元素和一个指示其位置的<div>。

<!-- 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对象包含有关拖动元素的前面位置的附加信息等