Перетаскивание изображения с помощью jquery

Я пытаюсь создать редактор фотографий, используя перетаскивание. Проблема в том, что когда я пытаюсь перетащить изображение в div в html, он перезагружает новую страницу вместо установки изображения в div. Я хочу поместить изображение в серый квадрат.Перетаскивание изображения с помощью jquery

<script type = "text/javascript"> 
    $.event.props.push("dataTransfer"); 

    $(function() { 
     function desenare(img) { 
      var cW = img.width, cH = img.height; 
      $("#editor") 
       .attr({ width: cW, height: cH }); 

      var context = $("#editor")[0].getContext("2d"); 
      context.drawImage(img, 0, 0); 

      var id = context.getImageData(0, 0, cW, cH); 

      var v = []; 
      for (var i = 0; i < 256; i++) { 
       v.push(0); 
      } 

      for (var y = 0; y < cH; y++) { 
       for (var x = 0; x < cW; x++) { 
        var i = (y * cW * 4) + x * 4; 
        var val = Math.round(
         (id.data[i] + id.data[i + 1] + id.data[i + 2])/3); 
        v[val]++; 
       } 
      } 

      grafic(context, v, cW, cH); 
     } 

     function grafic(c, v, W, H) { 
      c.save(); 
      var n = v.length; 
      var f = H/Math.max.apply(this, v); 
      var w = W/n; 

      c.rotate(Math.PI); 
      c.translate(-W, -H); 
      c.scale(-1, H/Math.max.apply(this, v)); 

      c.fillStyle = "rgba(255,0,0,0.3)"; 
      for (var i = 0; i < n; i++) { 
       c.fillRect(-i * w, 0, w, v[i]); 
      } 
      c.restore(); 
     } 


     $(document) 
      .on('dragover', function (e) { 
       event.stopPropagation(); 
      }) 
      .on('drop', function (e) { 
       event.preventDefault(); 
       var files = e.dataTransfer.files; 
       if (files.length > 0) { 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         desenare($("#editor") 
          .attr("src", e.target.result)[0]); 
        }; 
        reader.readAsDataURL(files[0]); 
       } 
      }); 
    }); 
</script>

источник

2017-01-10 StefanMadalin

е = событие. Используйте e.stopPropagation(); –

Пожалуйста, проверьте следующий код и ссылки на источник для JQuery UI.

Draggable:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 


</body> 
</html>

Droppable:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 


</body> 
</html>

Исходный код: https://jqueryui.com/

источник

2017-01-10 18:02:12 Varma

Перетаскивание изображения с помощью jquery

ответ

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