CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
P3P5
P3P5

Reputation: 1003

How to make a image to be draggable html

I have three buttons which add images to a div on my site. Now I want the added image to make so that I can drag it in my div. I doesn't has to be a div, it can be a canvas, I just want the images are added to be draggable.

Snippet :

function addimage() {
  var img = document.createElement("img");
  img.src = "http://bricksplayground.webs.com/brick.PNG";
  img.height = 50;
  img.width = 100;
  //optionally set a css class on the image
  var class_name = "foo";
  img.setAttribute("class", class_name);

  document.getElementById("myDiagramDiv").appendChild(img);
  //document.body.appendChild(img);
}
<div class="col-sm-7 text">
  <h1><strong>Div for the images</strong></h1>
  <div class="description">
    <div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"></div>
  </div>
</div>
<div class="col-sm-5 text">
  <div class="description">
    <h1><strong>Text</strong></h1>
  </div>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 2 osobe</button>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 4 osobe</button>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za vise od 4 osobe</button>
</div>

Upvotes: 1

Views: 12537

Answers (1)

Sooraj
Sooraj

Reputation: 10567

Use jQuery UI draggable - https://jqueryui.com/draggable/

Here is a working example

function addimage() {
  var img = document.createElement("img");
  img.src = "http://bricksplayground.webs.com/brick.PNG";
  img.height = 50;
  img.width = 100;

  var class_name = "foo";
  img.setAttribute("class", class_name);
  
  document.getElementById("myDiagramDiv").appendChild(img);
   $(img).draggable();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<div class="col-sm-7 text">
  <h1><strong>Div for the images</strong></h1>
  <div class="description">
    <div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"></div>
  </div>
</div>
<div class="col-sm-5 text">
  <div class="description">
    <h1><strong>Text</strong></h1>
  </div>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 2 osobe</button>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 4 osobe</button>
  <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za vise od 4 osobe</button>
</div>

Upvotes: 5

Related Questions