Переадресация перетаскивания Firefox перетаскивания JQUERY

Question

Я использую library.js-библиотеку, чтобы создать создателя перетаскивания. Все работает отлично, за исключением Firefox, когда я перетаскиваю изображение на холст. Он добавляет изображение, но перенаправляет URL-адрес. После перенаправления, когда я нажимаю на задний бит, он возвращается к предыдущей странице, и изображение находится на холсте.

Я искал и читал в течение нескольких часов, пробую все виды вещей. Кажется, что что-то в моем коде предотвращает «e.stopPropagation()»; или "e.preventDefault()" от правильной работы. Я просто не могу найти гремлин.

Любая помощь будет отличной. Благодаря!

ОБНОВЛЕНИЕ: Добавлен JSFiddle.
вот jsfiddle с моим кодом:
http://jsfiddle.net/bQxMu/

UPDATE 2:
Исправлена ​​проблема, вот та часть, которая фиксируется его:

function handleDrop(e) { 
// this/e.target is current target element. 

/* 
    if (e.stopPropagation) { 
     e.stopPropagation(); // stops the browser from redirecting. 
    } 
*/ 

    e.stopPropagation(); // Stops some browsers from redirecting. 
    e.preventDefault(); // Stops some browsers from redirecting. 

    var img = document.querySelector('#images img.img_dragging'); 

    console.log('event: ', e); 

    var newImage = new fabric.Image(img, { 
     width: img.width, 
     height: img.height, 
    // Set the center of the new object based on the event coordinates relative 
    // to the canvas container. 
     left: e.layerX, 
     top: e.layerY 
    }); 
    canvas.add(newImage); 

    return false; 
} 

Спасибо за помощь:)

window.onload=function(){ 

var canvas = new fabric.Canvas('canvas'); 

canvas.backgroundColor = '#ffffff'; 


function handleDragStart(e) { 
    [].forEach.call(images, function (img) { 
     img.classList.remove('img_dragging'); 
    }); 
    this.classList.add('img_dragging'); 

} 

function handleDragOver(e) { 
    if (e.preventDefault) { 
     e.preventDefault(); // Necessary. Allows us to drop. 

    } 

    e.dataTransfer.dropEffect = 'copy'; 

    return false; 
} 

function handleDragEnter(e) { 
    // this/e.target is the current hover target. 

    this.classList.add('over'); 

} 

function handleDragLeave(e) { 
    e.stopPropagation(); 

    this.classList.remove('over'); // this/e.target is previous target element. 

} 

function handleDrop(e) { 
    // this/e.target is current target element. 

    if (e.stopPropagation) { 
     e.stopPropagation(); // stops the browser from redirecting. 
    } 

    var img = document.querySelector('#images img.img_dragging'); 

    console.log('event: ', e); 

    var newImage = new fabric.Image(img, { 
     width: img.width, 
     height: img.height, 
     // Set the center of the new object based on the event coordinates relative 
     // to the canvas container. 
     left: e.layerX, 
     top: e.layerY 
    }); 
    canvas.add(newImage); 
    return false; 
} 

function handleDragEnd(e) { 
    // this/e.target is the source node. 
    [].forEach.call(images, function (img) { 
     img.classList.remove('img_dragging'); 

    }); 
} 

    var removeSelectedEl = document.getElementById('remove-selected'); 
    removeSelectedEl.onclick = function() { 
    var activeObject = canvas.getActiveObject(), 
     activeGroup = canvas.getActiveGroup(); 
    if (activeGroup) { 
     var objectsInGroup = activeGroup.getObjects(); 
     canvas.discardActiveGroup(); 
     objectsInGroup.forEach(function(object) { 
     canvas.remove(object); 
     }); 
    } 
    else if (activeObject) { 
     canvas.remove(activeObject); 
     $("#imageControl").fadeOut('slow'); 

    } 
    }; 

    var sendBackwardsEl = document.getElementById('send-backwards'); 
    sendBackwardsEl.onclick = function() { 
    var activeObject = canvas.getActiveObject(); 
    if (activeObject) { 
     canvas.sendBackwards(activeObject); 
    } 
    }; 

    var sendToBackEl = document.getElementById('send-to-back'); 
    sendToBackEl.onclick = function() { 
    var activeObject = canvas.getActiveObject(); 
    if (activeObject) { 
     canvas.sendToBack(activeObject); 
    } 
    }; 

    var bringForwardEl = document.getElementById('bring-forward'); 
    bringForwardEl.onclick = function() { 
    var activeObject = canvas.getActiveObject(); 
    if (activeObject) { 
     canvas.bringForward(activeObject); 
    } 
    }; 

    var bringToFrontEl = document.getElementById('bring-to-front'); 
    bringToFrontEl.onclick = function() { 
    var activeObject = canvas.getActiveObject(); 
    if (activeObject) { 
     canvas.bringToFront(activeObject); 
    } 
    }; 

document.getElementById('saveImg').onclick = function() { 
    if (!fabric.Canvas.supports('toDataURL')) { 
     alert('This browser doesn\'t provide means to serialize canvas to an image'); 
    } 
    else { 
    canvas.deactivateAll().renderAll(); 
     window.open(canvas.toDataURL('png')); 
    } 
    }; 



canvas.on('selection:cleared', function(options) { 
    var activeObject = canvas.getActiveObject(); 
     if (activeObject === null) { 
       $("#imageControl").fadeOut('slow'); 
      } 
}); 

canvas.on('object:selected', function(options) { 
    var activeObject = canvas.getActiveObject(); 
     if (options.target && activeObject !== null) { 
        $("#imageControl").show('slow'); 
       } 
}); 

canvas.on('selection:created', function(options) { 
     if (options.target) { 
        $("#imageControl").show('slow'); 
       } 
}); 


if (Modernizr.draganddrop) { 
    // Browser supports HTML5 DnD. 

    // Bind the event listeners for the image elements 
    var images = document.querySelectorAll('#images img'); 
    [].forEach.call(images, function (img) { 
     img.addEventListener('dragstart', handleDragStart, false); 
     img.addEventListener('dragend', handleDragEnd, false); 
    }); 
    // Bind the event listeners for the canvas 
    var canvasContainer = document.getElementById('canvas-container'); 
    canvasContainer.addEventListener('dragenter', handleDragEnter, false); 
    canvasContainer.addEventListener('dragover', handleDragOver, false); 
    canvasContainer.addEventListener('dragleave', handleDragLeave, false); 
    canvasContainer.addEventListener('drop', handleDrop, false); 

} else { 
    // Replace with a fallback to a library solution. 
    alert("This browser doesn't support the HTML5 Drag and Drop API."); 
} 

} 

HTML:

<div id="images"> 
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="70" height="90"></img>  
</div> 

<div id="canvas-container-controls"> 
<div id="imageControlWrapper"> 
<div id="imageControl"> 
<button class= "imgBtn" id="saveImg">Save Canvas</button> 
<button class="imgBtn" id="remove-selected">Remove selected object/group</button> 
<button id="send-backwards" class="imgBtn">Send backwards</button> 
<button id="send-to-back" class="imgBtn">Send to back</button> 
<button id="bring-forward" class="imgBtn">Bring forwards</button> 
<button id="bring-to-front" class="imgBtn">Bring to front</button> 
</div> 
</div> 

<div id="canvas-container"> 
    <canvas id="canvas" width="400" height="400"></canvas> 
</div> 
</div> 

Answer 1

Добавить e.preventDefault() в handleDrop: http://jsfiddle.net/wN29y/

function handleDrop(e) { 
// this/e.target is current target element. 
e.preventDefault(); 
if (e.stopPropagation) { 
    e.stopPropagation(); // stops the browser from redirecting. 
} 

var img = document.querySelector('#images img.img_dragging'); 

console.log('event: ', e); 

var newImage = new fabric.Image(img, { 
    width: img.width, 
    height: img.height, 
    // Set the center of the new object based on the event coordinates relative 
    // to the canvas container. 
    left: e.layerX, 
    top: e.layerY 
}); 
canvas.add(newImage); 

return false; 
} 

Answer 2

Я понимаю, что вы должны иметь e.stopPropagation в handleDragOver, иначе браузер по-прежнему принимает событие, и открывает изображение.

(Подобный мой ответ здесь: Why can't I get file dropping to work with jquery?)