如何在jQuery中处理事件？

Question

在我们的旧系统中，我们使用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});

}

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

 calEvent.handleMouseDown(ev);

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

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

Answer 1

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

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

Answer 2

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

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

在API页面上有以下示例：http://jqueryui.com/demos/draggable/#events