Как перенести изображение на страницу и сохранить его в режиме реального времени?

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 для достижения этой цели.

Просто создать Div с классом "daggable коробки"

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

Затем в файле JS добавить следующее.

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

Пример: http://codepen.io/rmfranciacastillo/pen/wWoYao

Btw, положение о том, что объект тянули НЕ будут сохранены, но вы можете быть в состоянии сохранить его, так как вы можете получить позицию объекта и сохранить его в базе данных ,

Я предлагаю это только с тех пор, как у вас есть ярлык JQuery, но я все же считаю это излишним для простого проекта.