"Drag me downX"라인을 캔버스 div로 끌어다 놓을 수 있습니다. 텍스트 줄은 그대로 유지되고 마우스 다음에 반투명 텍스트 줄이 있습니다. 나는 텍스트의 라인을 끌어이 같은 효과를 갖고 싶어 에서 캔버스를. 그러나 캔버스에 텍스트를 놓으면 이동할 수 없습니다. 위와 같은 효과를 내려면 어떻게해야합니까 (위에서 설명한 것과 동일한 효과를 갖는 것이 매우 중요합니다)?
HTML
<ul id="drag">
<li class="new-item">Drag me down1</li>
<li class="new-item">Drag me down2</li>
<li class="new-item">Drag me down3</li>
</ul>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
JS
$("li").draggable({
helper: 'clone'
});
$("#myCanvas").droppable({
accept: "li",
drop: function(event, ui) {
var context = $(this)[0].getContext("2d");
context.font = "16px helvetica";
context.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
}
});
CSS
li{
font-family:helvetica;
list-style-type:none;
}
기본적으로 요소가 그 자체로 드래그 앤 드롭되기 때문에 문제가있을 수 있다고 생각합니다. 숨겨진 캔버스를 만들고 원래 캔버스를 새 캔버스 위에 겹쳐 놓았습니다. 드래그 이벤트가 시작되면 숨겨진 캔버스가 더 높은 Z- 색인에 배치되고 원래 캔버스로 전달할 좌표 정보를 가져옵니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다