Почему ничего не отображается в холсте при удалении изображения?

У меня есть код, который не дает никаких ошибок, но когда я бросаю изображение в холст, вместо применения изображения к холсту ничего не происходит вообще. Я подозреваю, что это связано с функцией handledrop в javascript, но я не уверен.Почему ничего не отображается в холсте при удалении изображения?

пс. им с помощью Fabricjs

заранее спасибо за помощь :)

HTML:

<!doctype html> 
<html lang="en";> 
<head> 
    <meta charset="utf-8" /> 
    <title>CustomCase</title> 
    <link rel="stylesheet" href="SkapaDesign.css"> 
    <script src="Jquery.js"></script> 
    <script src="Modernizr.js"></script> 
    <script src="Fabric.js"></script> 
    <script src="Canvas.js"></script> 
</head> 
<body> 
    <div id="Wrapper"> 
     <section id="Body"> 
       <div id="CanvasDiv"> 
        <canvas id="Canvas" width="270px" height="519px"></canvas> 
       </div> 

       <div id="TextureView"> 
        <div id="TextureViewInside"> 
         <div id="images"> 
          <img draggable="true" src="FärgadePapper.png"> 
          <img draggable="true" src="Hajar.png"> 
          <img draggable="true" src="Labyrint.png"> 
          <img draggable="true" src="Martini.png"> 
         </div> 
        </div> 
       </div> 
     </section> 
    </div> 
</body> 
</html>

CSS:

#Body{ 
    height: 675px; 
} 
#Canvas, #TextureView{ 
    float: left; 
} 
#LeftColumn{ 
    float: left; 
    width: 355px; 
    margin: 20px 30px 0px 0px; 
} 
#RightColumn{ 
    float: left; 
    width: 600px; 
    margin-top: 20px; 
} 
#CanvasDiv{ 
    width: 270px; 
    height: 519px; 
    margin-left: 15px; 
} 
#Canvas{ 
    overflow: hidden; 
} 
#TextureView{ 
    width: 470px; 
    height: 559px; 
    overflow: auto; 
} 
#TextureViewInside{ 
    padding: 10px; 
} 
#images img{ 
    width: 97px; 
    display: inline-block; 
    vertical-align: top; 
    padding: 4px; 
}

Javascript:

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

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(); 
    } 
    e.dataTransfer.dropEffect = 'copy'; 
    return false; 
} 

function handleDragEnter(e) { 
    this.classList.add('over'); 
} 

function handleDragLeave(e) { 
    this.classList.remove('over'); 
} 

function handleDrop(e) { 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 

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

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

    var newImage = new fabric.Image(img, { 
     width: img.width, 
     height: img.height, 
     left: e.layerX, 
     top: e.layerY 
    }); 
    canvas.add(newImage); 

    return false; 
} 

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


$(function() { 
    if (Modernizr.draganddrop) { 
     var images = document.querySelectorAll('#images img'); 
     [].forEach.call(images, function (img) { 
      img.addEventListener('dragstart', handleDragStart, false); 
      img.addEventListener('dragend', handleDragEnd, false); 
     }); 
     var canvasContainer = document.getElementById('CanvasDiv'); 
     canvasContainer.addEventListener('dragenter', handleDragEnter, false); 
     canvasContainer.addEventListener('dragover', handleDragOver, false); 
     canvasContainer.addEventListener('dragleave', handleDragLeave, false); 
     canvasContainer.addEventListener('drop', handleDrop, false); 
    } else { 
     alert("This browser doesn't support the HTML5 Drag and Drop API."); 
    } 
});

источник

2013-11-11 user2961869

вы можете сделать скрипка, чтобы проверить то же самое – John

Проверьте, что класс img_dragging - правильно применяется к элементу. У меня была аналогичная проблема, когда

var images = document.querySelectorAll('#images img');

Не удалось собрать все изображения в Firefox, но это произошло в Chrome.

проверить этот JSFiddle раствора: http://jsfiddle.net/DanBrown180/USQ7w/

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

function handleDragStart(e) { 
    $('img').removeAttr('class').attr('class', 'img'); 
    console.log("Drag Started"); 
    console.log(e) 
    var imageid = e.target.id; 
    if (imageid == "") { 
     var imageid = e.target.firstChild.id 
    } 
    console.log(imageid); 
    $("#" + imageid).addClass('img_dragging'); 
    //this.classList.add('img_dragging'); 


}

В моей JS скрипку, который фиксирует ошибку, хром находит цель:

e.target.id;

и светлячок использует:

e.target.firstChild.id

источник

2013-11-12 12:07:50

Почему ничего не отображается в холсте при удалении изображения?

ответ

Смежные вопросы