Question

基本上我需要一些代码来点击鼠标并被拖动时执行。使用我当前的代码，代码在鼠标停止时和鼠标移动时执行，但是当鼠标单击释放时代码继续执行，所以我包含了一个if语句。我确信有一种更有效的方法可以做到这一点，所以任何帮助都会非常感激：）

我遇到的另一个问题是用户点击该元素，然后让鼠标（“//更多代码”）执行一次，但如果用户再次点击并放手，它将被执行两次如果他们再次选择和取消选择3次等。

你可能会说我有点像jQuery菜鸟！：P

当前代码：

$('element').mousedown(function(event){
  mouseDown = true;
  $(document).mousemove(function(event2){
    if(mouseDown){
      //code goes here
     }
   }).mouseup(function(){
     mouseDown = false;
         //more code
   });
 });

Answer 1

“我遇到的另一个问题是用户点击元素，然后让鼠标（“//更多代码”）执行一次，但如果是然后用户再次单击并放开它将执行两次，如果他们再次选择和取消选择3次等。“

那是因为每当他们按下鼠标时你就会绑定一个事件;第一次发生时，你有一个事件处理程序。下一次，两个事件处理程序。第三次，三个事件处理程序。等等。您需要事先调用unbind()以删除现有的事件处理程序，然后重新绑定它们。

Answer 2

我最近使用以下代码创建了一个可拖动的jquery扩展。您可以为拖动操作传递目标。

(function ($) {
    var element;
    var target;
    var settings = {
        onDrop: function (x, y) { }
    };

    var methods = {
        init: function (options) {
            if (options) {
                $.extend(settings, options);
            }
            return this.each(function () {
                // Code here for each element found by the selector   
                element = $(this);

                if (options.target) {
                    target = $(options.target);
                }
                else {
                    target = element;
                }
                // Move the element by the amount of change in the mouse position  
                element.parent().mousedown(function (event) {

                    element.data('mouseMove', true);
                    element.data('mouseX', event.clientX);
                    element.data('mouseY', event.clientY);
                });

                element.parents(':last').mouseup(function () {
                    element.data('mouseMove', false);
                });

                element.mouseout(methods.move);
                element.mousemove(methods.move);


            });

        },
        move: function (event) {
            if (element.data('mouseMove')) {
                var changeX = event.clientX - element.data('mouseX');
                var changeY = event.clientY - element.data('mouseY');

                var newX = parseInt(target.css('margin-left')) + changeX;
                var newY = parseInt(target.css('margin-top')) + changeY;


                target.css({ 'margin-left': newX, 'margin-top': newY });

                settings.onDrop(newX, newY);
                element.data('mouseX', event.clientX);
                element.data('mouseY', event.clientY);
            }
        }
    };

    $.fn.draggable = function (method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.draggable');
            return null;
        }

    };
})(jQuery);

然后这样称呼：

$('#overlay').draggable({ target: "#imagebehide", onDrop: function (x, y) {
            $('#leftpos').val(x);
            $('#toppos').val(y);

        } });

如何在执行多个事件时执行代码，即。鼠标单击时鼠标移动

2 个答案: