CODEWITHSUNDEEP
javascriptjquery
StefanMadalin
StefanMadalin

Reputation: 1

Drag and drop an image using jquery

I am trying to create a photo editor using drag and drop. The problem is that when i am trying to drag and drop the image in a div in html it reloads a new page instead of setting the image in the div. I want to put the image in the grey square.

enter image description here

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

Upvotes: 0

Views: 295

Answers (1)

user7279819
user7279819

Reputation:

Please check the following code and source link for 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>

Source code: https://jqueryui.com/

Upvotes: 1

Related Questions