JQuery와/mousedown + 드래그 앤 DIV 배경

드롭 안녕하세요, 저 좀 도와 :) 내가 좀 간단한 HTML/CSS를 페이지에 설정하기 위해 찾고JQuery와/mousedown + 드래그 앤 DIV 배경

을 필요로 초보자입니다. div를 전경에 놓고 싶습니다. 이미지는 약간 투명하고 배경 뒤에는 다른 divs를 독립적으로 드래그 할 수 있습니다. 나는 더 나은 생각을주기 위해 내가 본 세트를 시각적으로 설명하는이 포스트의 하단에 약간의 그림을 추가했다.

나는 .mousedown 이벤트에서 생각했지만 .trigger로 시도했지만 독립형 draggable div를 설정하는 방법을 찾을 수 없습니다 ... 무엇이 잘못 되었습니까? 이 기능에서 무엇이 생겨 났는가?

<script> 
    $('#imageA').mousedown(function(ev) { 
    $('#imageB,#imageC,#imageD').trigger(ev); 
    }); 
</script>

little drawing

당신의 도움이 사전에 대단히 감사합니다! A.

출처

2017-12-15 antogd

또한, (https://jqueryui.com/draggable/) [이 당신을 도울 수있다] 기억 방문하는 사업부가 다른 사람의 상단에있는 경우, 당신은 그들에게 결코 가지 않을 것입니다 ... –

당신의 대답에 대해 Diego 감사합니다. 그러나 그것은 실제로 브라우저에서 작동합니다 .. imageA div는 거의 투명하고 이벤트는 마우스를 underlayered imageB div로 보냅니다. 나는 그것을 끌어 놓을 수 있습니다. 하지만 ImageB는 다른 것들이 '감지되지'않습니다 ... – antogd

드래그 앤 드롭 작동 방식의 기본 예입니다.

<!DOCTYPE html> 
<html lang=en> 
<head> 
<title>Using Drag and Drop API to copy and move elements</title> 
<!-- 
    This example demonstrates using various HTML Drag and Drop interfaces including: 
    * Global "draggable" attribute 
    * Event handlers for dragstart, dragover and drop 
    * Global event handlers for ondragstart, ondragover and ondrop 
    * Using the DataTransfer interface to copy and move elements (<div>) 
--> 
<style> 
    div { 
    margin: 0em; 
    padding: 2em; 
    } 
    #src_copy, #src_move { 
    color: blue; 
    border: 5px solid black; 
    width: 300px; 
    height: 50; 
    } 
    #dest_copy, #dest_move { 
    border: 5px solid blue; 
    width: 300px; 
    height: 50; 
    } 
</style> 
<script> 
function dragstart_handler(ev) { 
console.log("dragStart"); 
// Change the source element's background color to signify drag has started 
ev.currentTarget.style.border = "dashed"; 
// Add the id of the drag source element to the drag data payload so 
// it is available when the drop event is fired 
ev.dataTransfer.setData("text", ev.target.id); 
// Tell the browser both copy and move are possible 
ev.effectAllowed = "copyMove"; 
} 
function dragover_handler(ev) { 
console.log("dragOver"); 
// Change the target element's border to signify a drag over event 
// has occurred 
ev.currentTarget.style.background = "lightblue"; 
ev.preventDefault(); 
} 
function drop_handler(ev) { 
    console.log("Drop"); 
    ev.preventDefault(); 
    // Get the id of drag source element (that was added to the drag data 
    // payload by the dragstart event handler) 
    var id = ev.dataTransfer.getData("text"); 
    // Only Move the element if the source and destination ids are both "move" 
    if (id == "src_move" && ev.target.id == "dest_move") 
    ev.target.appendChild(document.getElementById(id)); 
    // Copy the element if the source and destination ids are both "copy" 
    if (id == "src_copy" && ev.target.id == "dest_copy") { 
    var nodeCopy = document.getElementById(id).cloneNode(true); 
    nodeCopy.id = "newId"; 
    ev.target.appendChild(nodeCopy); 
    } 
} 
function dragend_handler(ev) { 
    console.log("dragEnd"); 
    // Restore source's border 
    ev.target.style.border = "solid black"; 
    // Remove all of the drag data 
    ev.dataTransfer.clearData(); 
} 
</script> 
</head> 
<body> 
<h1>Drag and Drop: Copy and Move elements with <code>DataTransfer</code></h1> 
<div draggable="true" id="src_copy" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"> 
    Select this element and drag to the <strong>Copy Drop Zone</strong>. 
</div> 
<div id="dest_copy" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Copy Drop Zone</strong></div> 
<div draggable="true" id="src_move" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"> 
    Select this element and drag to the <strong>Move Drop Zone</strong>. 
</div> 
<div id="dest_move" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Move Drop Zone</strong></div> 
</body> 
</html>

도움이 더 필요한 경우 , MDN Web Docs - HTML Drag and Drop API

출처

2017-12-15 18:30:47

JQuery와/mousedown + 드래그 앤 DIV 배경

답변

관련 문제