후다다닥
371
2018-06-03 03:53:17
0
821

비디오 태그를 마우스 클릭시에 마우스의 위치에 따라 이동 시키고 싶습니다.


안녕하세요

질문그대로 비디오 태그(플레이어자체를)를 마우스 클릭시에 마우스의 위치에 따라 이동시키고 싶습니다.
div태그로 감싸서 div태그자체를 jquery를 이용해서 움직엿더니 아무 반응이없습니다..
기존의 obj1은 잘움직이는데 obj2(비디오태그를 감싸고잇는)아무런 반응이 없습니다.
혹시 마우스의 위치로 비디오태그를 움직일 수 있는 방법이 있는지 알려주세요.
div안 감싸고 video 태그자체를 마우스의 움직임에 따라 위치 변경할 수 있는 방법이 있을까요?
아래는 마우스핸들러 포함된 코드입니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="resources/jquery-3.2.0.min.js"></script>
<style type="text/css">
div {
 position: absolute;
 width: 100px;
 height: 100px;
}

#obj1 {
 background-color: #ff6b6b;
 left: 100px;
 top: 100px;
}

#obj2 {
 background-color: #5c7cfa;
 left: 10px;
 top: 10px;
}

#obj3 {
 background-color: #a9e34b;
 left: 300px;
 top: 100px;
}
</style>

</head>
<body>
 <h1>Hello world!</h1>
 <div id="obj1"></div>
 <div id="obj2">
  <video src="resources/video/1234.mp4" controls autoplay loop></video>
 </div>

 <script type="text/javascript">
  var obj1 = $('#obj1');
  var obj2 = $('#obj2');
  obj1.click(function(event) {
   handleMoushDown(event);
  })
  obj2.click(function(event) {
   handleMouseDown(event);
  })

  // 타겟, 마우스 포인터의 시작 위치 등에 대한 변수 선언
  var target = null;
  var startX = null;
  var startY = null;
  var startLeft = null;
  var startTop = null;

  function handleMouseDown(event) {
   // 시작 위치 등 저장
   target = event.target;
   startX = event.clientX;
   startY = event.clientY;
   startLeft = target.offsetLeft;
   startTop = target.offsetTop;

   // 마우스 무브, 업 이벤트 리스너 할당
   document.addEventListener('mousemove', handleMouseMove);
   document.addEventListener('mouseup', handleMouseUp);
  }
  function handleMouseMove(event) {
   // 현재 마우스 포인터 위치와 시작 위치를 이용해 계산
   var currentX = event.clientX;
   var currentY = event.clientY;
   var deltaX = currentX - startX;
   var deltaY = currentY - startY;

   // 계산된 위치 값을 타겟에 설정
   target.style.left = (startLeft + deltaX) + 'px';
   target.style.top = (startTop + deltaY) + 'px';
  }
  function handleMouseUp(event) {
   // 마우스 무브, 업 이벤트 리스너 해제
   document.removeEventListener('mousemove', handleMouseMove);
   document.removeEventListener('mouseup', handleMouseUp);
  }
 </script>
</body>
</html>


0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.