Как выполнить код, когда выполняется несколько событий, т.е. перемещение мышью при щелчке мышью

Question

В основном мне нужен код для выполнения при щелчке мышью и перетаскивании. В моем текущем коде код выполняется, когда мышь нажата и когда мышь перемещена, но затем, когда щелчок мыши отпущен, код продолжает выполняться, поэтому я включил оператор if. Я уверен, что есть гораздо более эффективный способ сделать это, поэтому любая помощь будет очень полезна:)

PS Еще одна проблема, с которой я столкнулся, это сказать, что пользователь нажимает на элемент, затем отпускает mouseup ("// more code"), который выполняется один раз, но если пользователь затем нажимает снова и отпускает, он будет выполнен дважды, и если они выбирают и отменяют выбор снова 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

"Еще одна проблема, с которой я столкнулся, это сказать, что пользователь нажимает на элемент, затем отпускается mouseup ("// more code") выполняется один раз, но если Затем пользователь нажимает снова и отпускает, он будет выполнен дважды, и если они выбирают и отменяют выбор снова 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);

        } });