jqueryを使用して画像をドラッグ＆ドロップする

ドラッグアンドドロップを使用してフォトエディタを作成しようとしています。問題は、私はドラッグして、divの画像をdivの画像を設定する代わりに、新しいページをリロードするHTMLの画像をドロップしようとしているときです。私は灰色の広場に画像を入れたい。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 =イベント。 e.stopPropagation（）を使用します。 –

jQueryのUIのための次のコードとソースのリンクをご確認ください。ドラッグ可能

：

<!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>

ドロップ可：

<!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を使用して画像をドラッグ＆ドロップする

答えて

関連する問題