javascript - How to make a image to be draggable html - Stack Overflow

admin 管理员组

文章数量: 1086019

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 = ".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>

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

• javascript
• jquery
• html
• css
• jquery-ui

Share Improve this question Follow edited Jun 22, 2016 at 11:28 divy3993 5,81022 gold badges3030 silver badges4343 bronze badges asked Jun 22, 2016 at 11:25 P3P5P3P5 1,00366 gold badges1818 silver badges3232 bronze badges 3

• 1 If you could use jQuery plugin's try jqueryui./draggable. You can use jQuery.live() to bind dragging to dynamically added images – Pugazh Commented Jun 22, 2016 at 11:26
• Add img.draggable = true; property... – Rayon Commented Jun 22, 2016 at 11:29
• If you're not already using jQuery UI draggable why did you tag this with jQuery UI..! – T J Commented Jun 22, 2016 at 11:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

Here is a working example

function addimage() {
  var img = document.createElement("img");
  img.src = "http://bricksplayground.webs./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery./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>

本文标签： javascriptHow to make a image to be draggable htmlStack Overflow