javascript - 如何在页面上移动图像并使其实时保持位置？

Question

我和一群 friend 正在为一个节目做一个实验元素。

目标:我们希望在页面上存在多个对象(例如图像、文本、gif)，并且可以使用可拖动脚本在该页面上四处移动并实时保持位置。我们计划让几个人一次访问该页面以在屏幕上四处移动对象。因此，我们的想法是创建某种具有多个屏幕/设备的协作拼贴画。

我遇到了这个 www.togetherjs.com/examples/drawing/

所以我想把这个绘图的想法与其他人一起使用，但改为实现可拖动的图像，我希望图像在移动后保持位置。

我应该添加什么来确保图像保持在同一位置、可以实时拖动并保持新位置？我已经在这里开始了一些事情http://jsfiddle.net/bj2ftf59/

var dragobject = {
  z: 0,
  x: 0,
  y: 0,
  offsetx: null,
  offsety: null,
  targetobj: null,
  dragapproved: 0,
  initialize: function() {
    document.onmousedown = this.drag
    document.onmouseup = function() {
      this.dragapproved = 0
    }
  },
  drag: function(e) {
    var evtobj = window.event ? window.event : e
    this.targetobj = window.event ? event.srcElement : e.target
    if (this.targetobj.className == "drag") {
      this.dragapproved = 1
      if (isNaN(parseInt(this.targetobj.style.left))) {
        this.targetobj.style.left = 0
      }
      if (isNaN(parseInt(this.targetobj.style.top))) {
        this.targetobj.style.top = 0
      }
      this.offsetx = parseInt(this.targetobj.style.left)
      this.offsety = parseInt(this.targetobj.style.top)
      this.x = evtobj.clientX
      this.y = evtobj.clientY
      if (evtobj.preventDefault)
        evtobj.preventDefault()
      document.onmousemove = dragobject.moveit
    }
  },
  moveit: function(e) {
    var evtobj = window.event ? window.event : e
    if (this.dragapproved == 1) {
      this.targetobj.style.left = this.offsetx + evtobj.clientX - this.x + "px"
      this.targetobj.style.top = this.offsety + evtobj.clientY - this.y + "px"
      return false
    }
  }
}

dragobject.initialize()

.drag {
  position: relative;
  cursor: hand;
  z-index: 100;
  width: 250px;
}

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<br>

<img src="http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg" class="drag" onmouseover="this.src='http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg'" onmouseout="this.src='http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg'"
alt="Giraffe Boy" title="Giraffe Boy" class="Glassware" max-width="20px" />



<script src="https://togetherjs.com/togetherjs-min.js"></script>

Answer 1

您可以使用 JqueryUI 来完成此操作。

简单地创建一个类为“daggable-box”的 Div

<div class="draggable-box">
  something in here
</div>

然后在您的 JS 文件中添加以下内容。

 $(".draggable-box").draggable();
 $(".draggable-box").resizable();

示例:http://codepen.io/rmfranciacastillo/pen/wWoYao

顺便说一句，对象被拖动的位置不会被保存，但您可以保存它，因为您可以获得对象的位置并将其保存在数据库中。

我只是建议这样做，因为你有一个 JQuery 标签，但我仍然认为这对于一个简单的元素来说是一种矫枉过正的做法。