jQuery - 使用像“dragover”这样的JS事件

时间:2013-07-31 12:08:14

标签: javascript jquery drag-and-drop

我有一个带有eventListener的JavaScript函数,用于`dragover。

看起来像这样:

    document.getElementById("someID").addEventListener("dragover",
        function(){ 
            //Do logic
        }, 
     false);

事情是 - someID将是一个动态元素 - 它会被移除并添加到页面上。删除并重新添加后,eventListener将不再拾取dragover事件。我知道如何处理这种情况的唯一方法是使用jQuery的.on()

我的问题:我在jQuery API下找不到dragover事件......它是否存在?如果不是如何在jQuery中使用它?

1 个答案:

答案 0 :(得分:3)

您可以将客户拖动事件定义为

(function(jQuery) {

//Defining drag event.
jQuery.fn.drag = function() {
    eventType = arguments[0] || 'dragstart';
    onEvent = typeof arguments[1] == 'function' ? arguments[1] : function() {
    };
    eventOption = arguments[2] || false;

    $(document).on('mouseover', $(this).selector, function() {
        if ($(this).hasClass(eventType)) {
            return;
        }
        if (! typeof eventType == 'string') {
            return;
        }

        console.log('Binding Drag Event');
        $(this).each(function() {
            $(this)[0].addEventListener(eventType, onEvent, eventOption);
            $(this).addClass(eventType);
        })
    });
}
})(jQuery);

然后您必须将其添加为插件并将其应用于所需的选择器,如下所示。

$('#someID').drag('dragover', function(){ 
        //Do logic
        alert('DRAGGING!!!!!!');
    }, 
 false);

工作小提琴http://jsfiddle.net/sadepu/aDYfP/