如何在 jQuery 中处理事件？答案

【问题标题】：How Do I handle an event in jQuery?如何在 jQuery 中处理事件？
【发布时间】：2011-08-06 16:03:21
【问题描述】：

在我们的旧系统中，我们使用 YUI，但新系统使用的是 jQuery。我们有一个数据网格。在旧系统中，在 mousedown 事件中，我们使项目可拖动。鼠标保持不动，用户拖动项目。我们这样做是为了避免使所有内容都可拖动以保护资源。旧代码看起来像：

function dragThisEntity(selfPtr,...) {

//This is the function called when a user clicks on a draggable item in a report.


var dragSpan = Dom.get('dragSpan'+refInst);  

//We now have a div that can be dragged to the calendar

calEvent = new ZMRCalendarEvent('dragSpan'+refInst);
calEvent.handleMouseDown(ev);

在 jQuery 中，当鼠标按下时，我们调用这个函数：

function makeDraggable(element){

   var target_id = '#' + element.id;
   //alert(target_id);
   $( target_id ).draggable({scroll:true,scrollSensitivity:100,scrollSpeed:100});

}

如果用户再次点击，则 span 是可拖动的。我需要的是让用户不必再次单击的能力...继续鼠标按下事件，就像我对 YUI 行所做的那样，

 calEvent.handleMouseDown(ev);

请注意 - 我知道我可以让它们都可以在 Dom 上拖动。这不是我想要做的，因为可能有数百个，如果没有必要，我宁愿不使用这些资源。如果用户点击它们，我只想让它们可拖动。

我不是在寻找 Jquery UI 拖放的基础知识。我能做到。 :-) 我正在尝试一种更高级的方案来节省资源。

【问题讨论】：

您应该从 jQuery 教程站点：docs.jquery.com/Main_Page 开始，并查看可拖动的 API 站点：jqueryui.com/demos/draggable。那里有大量示例，我敢打赌，如果您先阅读如何使用这些函数，您会发现 jQuery 更容易。
@scrappedcola：仅仅因为她以不同的方式处理解决方案并不意味着她没有阅读 API 或她需要教程。以不同方式思考问题的人使编码变得有趣。

标签： jquery events

【解决方案1】：

只需在 DOM 上运行 .draggable() 代码即可。不过，您需要使用不同的选择器。

$(function ()
{
    $('some selector').draggable({
        scroll:true,
        scrollSensitivity:100,
        scrollSpeed:100
    });
});

【讨论】：

除非我不在基地，否则我不想这样做。我不想让所有这些类型的跨度都可以拖动。如果我点击它，我只想让它可拖动。可能有数百个，如果不需要，我不想消耗资源。
@Amy：jQuery 有效地处理 DOM 事件绑定（请参阅：stackoverflow.com/questions/3162748/…）提供跨浏览器、可维护的解决方案比将事件添加到所有跨度需要更多时间。此外，jQuery 1.5 中的 DOM 遍历非常快。
由于吉姆的评论，我将接受这个答案。我最终做的是让 jqGrid 的 loadComplete 事件中的所有跨度都可拖动。（文件准备好的跨度没有）谢谢大家。

【解决方案2】：

jQuery UI .draggable() 为您处理 mousedown/mouseup 事件。

您需要做的就是在文档加载时对要拖动的项目调用 draggable。然后，您可以响应事件。

API 页面上有相关示例：http://jqueryui.com/demos/draggable/#events

【讨论】：