페이지에서 이미지를 이동하고 위치를 실시간으로 유지하려면 어떻게해야합니까?

Question

친구들과 친구들이 실험을 위해 실험 프로젝트를 진행하고 있습니다. 나는 초보자 코더 그래서 나와 함께 베어입니다.

목표 : 페이지에 존재하는 여러 객체 (예 : 이미지, 텍스트, GIF)를 드래그 가능한 스크립트로 이동하고 위치를 실시간으로 유지할 수 있습니다. 우리는 한 번에 몇 사람이 페이지를 액세스하여 화면에서 물체를 움직이게 할 계획입니다. 따라서 아이디어는 여러 화면/장치로 일종의 공동 콜라주를 만드는 것입니다.

나는 그래서 다른 사람들과 도면의 생각을 대신 드래그 이미지를 구현하려는 나는 이미지가 한 번에 이동 위치를 유지하려면이 www.togetherjs.com/examples/drawing/

을 가로 질러왔다.

이미지를 동일한 지점에 유지하고 실시간으로 드래그하고 새 위치를 유지할 수 있도록 추가 할 내용은 무엇입니까? 난 이미 당신은 이러한 목표를 달성하기 위해 JqueryUI을 사용할 수 있습니다 여기에 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

뭔가를 시작했습니다.

단순히 클래스 "daggable 박스"그런 다음 JS 파일에 다음을 추가

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

와 사업부를 만들 수 있습니다.

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

예 : http://codepen.io/rmfranciacastillo/pen/wWoYao

, BTW 개체가 끌려 그 위치가 저장되지 않습니다하지만 당신은 당신이 개체의 위치를 ​​얻을 수 있기 때문에 저장하고 데이터베이스에 저장할 수 있습니다 .

JQuery라는 태그가 있기 때문에 나는 이것을 제안하고 있지만 이것은 여전히 ​​간단한 프로젝트를위한 과잉이라고 생각합니다.