저는 Javascript의 초보자이고 CSS로 만든 테두리 내부로 이미지를 가져 오려고합니다. 어떤 이유로 스크립트가 작동하지 않는 것은 코드 나 뭔가에 작은 실수가있을 수 있습니다. 그밖에.
스 니펫은 잘 작동하지만 이미지가 표시되지 않습니다.
"e"는 내가 가지고있는 이벤트의 줄임말입니다 : drag (e) allowdrop (e) and drop (e)
감사합니다
<!doctype html>
<html>
<head>
<title>drag and drop</title>
<style type="text/css">
#targetDiv {
margin-left: 300px;
width: 200px;
height: 150px;
padding: 10px;
border: 1px solid #999999;
}
</style>
</head>
<body>
<h1>drag and drop</h1>
<div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />
<script>
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e) {
e.preventDefault();
}
function drop(e) {
var dragItem = e.dataTransfer.getData("Text");
e.preventDefault();
e.target.appendChild(document.getElementById(dragItem));
}
//You don't need to edit this one cuz you don't need var var is probably optional
</script>
</body>
</html>여기에 수정 된 버전이 있습니다. )문자를 놓 쳤고 var여기에 정확히 하나의 표현식을 추가 했습니다. take.ms/el76e
<!doctype html>
<html>
<head>
<title>drag and drop</title>
<style type="text/css">
#targetDiv {
margin-left: 300px;
width: 200px;
height: 150px;
padding: 10px;
border: 1px solid #999999;
}
</style>
</head>
<body>
<h1>drag and drop</h1>
<div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />
<script>
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e) {
e.preventDefault();
}
function drop(e) {
e.preventDefault();
var dragItem = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(dragItem));
}
</script>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다