В Javascript FireFox не позволяет изменять размер div перетаскиванием - PullRequest
Новая
       56

В Javascript FireFox не позволяет изменять размер div перетаскиванием

0 голосов
/ 31 января 2012

У меня есть div с рамкой, и в его правом нижнем углу у меня есть изображение для изменения размера:

enter image description here

Таким образом, когда пользователь нажимает мышь на изображение, он (или она) может перетаскивать мышь и изменять размер div.

Это прекрасно работает во всех браузерах, кроме FireFox.

В FireFox происходит нечто странное: после того, как пользователь нажимает кнопку мыши и начинает перетаскивать курсор, курсор меняется на:

enter image description here

Таким образом, курсор изменяется на этот, и события перемещения мыши не наступают, когда мышь перетаскивают.

Мне интересно, что вызывает такое поведение. Я подумал, что, возможно, FireFox считает, что пользователь пытается выделить текст, нажимая и перетаскивая мышь. Но я отменил выделение текста, используя этот код: 

resizeImageImg.onselectstart          = "return false;";
resizeImageImg.ondragstart            = "return false;";

resizeImageImg.style.WebkitUserSelect = 'none';
resizeImageImg.style.KhtmlUserSelect  = 'none';
resizeImageImg.style.MozUserSelect    = 'none';
resizeImageImg.style.MsUserSelect     = 'none';
resizeImageImg.style.OUserSelect      = 'none';
resizeImageImg.style.UserSelect       = 'none';

resizeImageImg.setAttribute ("unselectable", "on");
resizeImageImg.setAttribute ("draggable",    "false");

(как для div, так и для изображения с изменением размера)

Но это не решило проблему. FireFox по-прежнему не позволяет изменять размеры и меняет курсор на «не разрешено».

Может кто-нибудь помочь, пожалуйста?

Ответы [ 2 ]

1 голос
/ 01 февраля 2012

Спасибо всем, я нашел решение.

Я заменил: 

resizeImageImg.ondragstar = "return false;";

от 

resizeImageImg.ondragstart = function () { return false; };

и он начал работать и в FireFox.

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

resizeImageImg.setAttribute ("draggable", false);

(по крайней мере, в FireFox), потому что события ondragstart все еще идут. Я понял это, когда установил: 

resizeImageImg.ondragstart = function () { alert ("ondragstart"); return false; };

Итак, я понял, что FireFox не подчиняется setAttribute («draggable», false) - в то время как другие браузеры делают.

0 голосов
/ 31 января 2012

Энди, вот решение, которое я нашел. Я приложил большие усилия, чтобы сделать его быстрым и простым в использовании.

Вы можете просмотреть файл здесь: http://files.social -library.org / StackOverflow / imageResizer.html

Прост в использовании. Создайте свое изображение и укажите ширину и высоту. Затем, после загрузки страницы, вызовите функцию imageResizer.init (imageObject), отправив объект изображения в качестве параметра. Затем он настроит изображение с помощью перетаскивателя.

Это работает в Firefox, Chrome и Internet Explorer 8 +.

...