Question

这里我有代码

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

我希望在图像丢入div标签时获取用于保存在数据库中的图像名称，任何人都可以为此获得解决方案吗？

Answer 1

你几乎已经得到了答案。

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    console.log("image src = ", document.getElementById(data).getAttribute("src"));
}

您可以重构一下并缓存图像。

function drop(ev) {
    var data  = ev.dataTransfer.getData("text"),
        myImg = document.getElementById(data);

    ev.target.appendChild(myImg);
    ev.preventDefault();    
    console.log("image src = ", myImg.getAttribute("src"));
}

https://jsfiddle.net/3mja3mm1/

Answer 2

只需更改拖动功能。

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.src);
}

function drop(ev, target) {
    ev.preventDefault();
    console.log(target.id, ev.target.id)

    var data = ev.dataTransfer.getData("text/html");
    alert(data)
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>


<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

＆＃13;

获取拖放值以保存在mysql数据库中

2 个答案: