마우스로 n 드롭을 드래그하는 방법은 무엇입니까?

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
\t <title>Drag & hhkhhDrop </title> 
 
\t <link rel="stylesheet" type="text/css" href="./Style.css" /> 
 

 

 
\t 
 
</head> 
 

 

 
<body> 
 

 
<h3>Moving words around to make a sentence</h3> 
 
<div id="answerDiv"> 
 
\t 
 
\t  <div class="dragDropSmallBox" class="destinationBox" id="a6">Page</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a1">THIS</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a5">Web</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a2">Is</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a4">Nice</div> 
 
\t \t <div class="dragDropSmallBox" class="destinationBox" id="a3">A</div> 
 
\t \t 
 
\t \t 
 
\t </div> 
 

 
<div style="padding-top:280px;"> 
 
\t <div id="questionDiv"> 
 
\t \t 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q1">1</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q2">2</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q3">3</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q4">4</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q5">5</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t <div class="mover" class="dragDropSmallBox" id="q6">6</div> 
 
\t \t <div class="destinationBox"></div> 
 
\t \t 
 
\t 
 
\t 
 
\t </div> 
 

 
\t 
 
\t 
 
\t </div> 
 
\t 
 
<div id="dragContent"></div> 
 
<input type="button" onclick="dragDropResetForm();return false" class="reset" value="Reset"> 
 
</body> 
 
</html>

이미 드래그를하고 페이지의 요소에 대한 기능을 삭제,하지만 난 마우스를 클릭 할 의미, 드롭 별도의 클릭으로 드래그 할 수있는 요소를 만들고 싶어

요소를 드래그하고 또 다른 클릭은 드롭한다고 가정합니다. 어떤 도움을 주시겠습니까?

출처

2016-06-23 White Flower

이 코드를 모두 질문에만 묻는 것으로 추가 할 수 있습니까? –

질문을 업데이트했습니다. –

JQueryUI에는 draggable이라는 멋진 inbuilt 메서드가 있습니다. 페이지에서 다른 요소를 드래그하여 이동할 수 있습니다.

여기에 대해 자세히 알아보기 :이 간단하면서도 우아한 해결책을 시도 할 수 있습니다 https://jqueryui.com/draggable/

출처

2016-06-24 05:15:55 Akjm

. 여기에서 추가 클릭하여 요소를 삭제해야합니다.

var dragContentDiv = document.getElementById('dragContent'); 

// Disable browser's drag and drop functionality 
dragContentDiv.ondragstart = function() { 
    return false; 
}; 

// Watch the mouse button press 
dragContentDiv.onmousedown = function(e) { 
    // Move the selected element to absolute coordinates 
    dragContentDiv.style.position = 'absolute'; 
    moveAt(e); 
    // If needed, move element to the body, so it's not inside of position:relative block 
    document.body.appendChild(dragContentDiv); 

    // Show dragContentDiv above all other elements 
    dragContentDiv.style.zIndex = 1000; // показывать мяч над другими элементами 

    // Move element horisontally under cursor coordinates 
    // and move it halfway of it's width to make it centered 
    function moveAt(e) { 
    dragContentDiv.style.left = e.pageX - dragContentDiv.offsetWidth/2 + 'px'; 
    } 

    // Move it around the screen 
    document.onmousemove = function(e) { 
    moveAt(e); 
    } 

    // Watch the end of a process 
    dragContentDiv.onmouseup = function() { 
    document.onmousemove = null; 
    dragContentDiv.onmouseup = null; 
    } 
}

출처

2016-06-24 05:29:05 Andrii

마우스로 n 드롭을 드래그하는 방법은 무엇입니까?

답변

관련 문제