Question

我和一群朋友正在为一个节目进行实验项目。

目标：我们希望在页面上存在多个对象（例如图像，文本，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的标签，但我仍然认为这对于一个简单的项目来说太过分了。

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

1 个答案: