JavaScript: Перетаскивание мыши по ссылкам

Question

Я пытаюсь создать страницу календаря, на которой вы можете щелкнуть и перетащить, чтобы выбрать несколько календарных дней одновременно. Все работает отлично в Google Chrome, но в Firefox, когда я пытаюсь начать перетаскивание, он терпит неудачу. Причиной этого является то, что каждый календарный день содержится в ссылке (<a></a>). Когда вы пытаетесь перетащить ссылки в Firefox, это делает свое действие. Есть ли способ предотвратить это или обойти его?

Answer 1

Я столкнулся с этим вопросом, видел свою нить. В моем случае я обрабатываю события мыши нижнего уровня, а не клик. Я обнаружил, что в mousedown jQuery (http://docs.jquery.com/Events/mousedown#fn) я мог бы подавить специальное поведение Firefox, вызвав событие event.preventDefault (http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29) на событие входящей мыши.

Я вызывал его на других обработчиках событий, но я подозреваю, что только mousedown() достаточно, чтобы остановить браузеры от их пользовательского поведения перетаскивания.

Answer 2

Если вы используете jQuery, выполните следующие действия. $ ("a") .click (function() { return false; });

return false предотвращает по умолчанию настройки браузера.

Answer 3

Для IE вы можете также добавить:

// prevent text selection in IE 
    document.onselectstart = function() { return false; }; 
    // prevent IE from trying to drag an element 
    target.ondragstart = function() { return false; }; 

Answer 4

Хм, хорошо, возможно, это немного поздно для этого. Но если бы вы не поставили эту тему, возможно, я бы никогда не разрешил это. У меня была такая же проблема, поэтому я начал рисовать в голове, как работают события. среда такова:

наш перетаскиваемым пункт:

<div id="sender"><a href="http://www.ourlinktodestination.com">my title</a></div> 

наш Droppable пункт:

<table><tr><td class="celdarec">&nbsp;</td></tr><table> 

Так вот это:

jQuery(document).ready(function($) { 
    var globalEle, globalLink; 

    $(".sender").draggable({ 
     revert:'invalid', 
     start:function(event, ui){ 
      globalEle = $(this); 
      globalLink = $(this).find("a").attr("href"); 
     }, 
     stop:function(event, ui){ 
      globalEle = null; 
     } 
    }); 

    $("#tablareceptora .celdarec").droppable({ 
     accept: '.sender', 
     hoverClass: 'drop_hover', 
     drop: function(event, ui){ 
      $(this).html(globalEle.html()); 
      $(this).find("a").attr("href", globalLink); 
      globalEle.remove(); 
     }, 
     tolerance: 'pointer' 
    }); 

    $(".sender").delegate("a", "mouseup", function(e){ 
     e.target.href ="javascript:void(0)"; 
    }); 
}); 

(я использую JQuery и jQuery ui из папки wordpress, поэтому первая строка использует инструкцию «jQuery» вместо o f "$" и поместите это последнее на обработчик в качестве параметра).

1. Когда вы нажимаете для перетаскивания, event.target.href достигается и заполняется нашей ссылкой. По причинам, которые я не могу объяснить (пока), даже если вы используете preventDefault, в событии mouseup, используя оператор delegate, в элементе, переданном в область с возможностью изменения, ссылка все еще перенаправляется на него.

2. Мы предполагаем, что это событие реагирует на действие click ... «click», а это означает: «Мышь вниз и мышь» ... но вот что: я использовал на перетаскиваемой опции «start» это:

   globalLink = $(this).find("a").attr("href"); 
   

   GlobalLink является объявленная переменная наружно (в начале скрипта), поэтому, когда вы начинаете тянуть, ссылка отправляется в эту переменную. Затем на перемещаемом элементе (в моем случае класс, называемый отправителем) вы должны использовать оператор делегата, ища шасси «a» в событии «mouseup» и помещать «#» в цель.HREF установка мероприятия прошли:

   $(".sender").delegate("a", "mouseup", function(e){ 
       e.target.href = "javascript:void(0)"; 
   }); 
   

   Это позволит избежать каких-либо поведение, которое работает над утверждением preventDefault (который я предполагаю, что это происходит от случая, который уклоняется от этого ограничения).

3. Наконец-то вы опустите свою ссылку на шасси «a». Однако, если мы просто перейдем к камере, если вы используете firebug и проверьте код, атрибут href имеет «javascript: void (0)», который был передан при событии mouseup. Это может ответить на многие вопросы, например, как срабатывает переадресация в действии drop. Средство jquery ui работает над defaultPrevent, потому что поведение перенаправления на событие droppable является запрограммированным поведением. Так вот почему я сохранил ссылку на внешнем переменном, так что я могу передать его на событии перетаскивания в сбрасываемой настройке:

   $(this).find("a").attr("href", globalLink); 
   

Надеется, что это может помочь любым другому парню или девушке, которая в том же самом ситуация

Хорошие вибрации для всех!