Question

我有三个按钮可以将图像添加到我网站上的div中。现在我想要添加的图像，以便我可以在我的div中拖动它。我不必是一个div，它可以是一个画布，我只是希望图像被添加为可拖动。

代码段

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>

Answer 1

使用jQuery UI draggable - https://jqueryui.com/draggable/

这是一个工作示例

＆＃13;

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();
}

＆＃13;

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

＆＃13;

如何使图像成为可拖动的html

1 个答案: