Question

我正在尝试制作包含Table和图像的静态WebPage。我必须使用纯JavaScript代码才能让我的图片可以拖动。这是我的HTML代码：

function FirstJob(){
    myPic = document.getElementById('refImage');
    myPic.addEventListener("dragstart", startDrag, false);
    cloRef1 = document.getElementById('tr1_1');
//  cloRef2 = document.getElementByID('tr1_2');
//  cloRef3 = document.getElementByID('tr2_1');
//  cloRef4 = document.getElementByID('tr2_2');

    cloRef1.addEventListener("dragenter", function(e){e.preventDefault();}, false);
    cloRef1.addEventListener("dragover", function(e){e.preventDefault();} , false);
    cloRef1.addEventListener("drop", dropped , false);
}

function startDrag(e){
    // save information about our element over the event startDrag
    var varImg = '<center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png"></center>';
    e.dataTransfer.setData('myImg', varImg);
}

function dropped(e){
    e.preventDefault();
    cloRef1.innerHTML = e.dataTransfer.getData('myImg');
}
window.addEventListener("load", FirstJob, false);

img{
  width:50px;
  height:50px
}

<html>
<head>
    <title>Drag and Drop</title>
    <link rel="stylesheet" href="file.css">
    <script src="file.js"></script> 
</head>
<body>
    <center>
        <h3><li>Drag and Drop Section</li></h3>
            <table border="1" width="50%" height="50%">
                <tr>
                    <td><center><b>colonne 1</b></center></td>
                    <td><center><b>colonne 2</b></center></td>
                </tr>
                <tr id="tr1">
                    <td id="tr1_1">
                        <center>drag something into me</center>
                    </td>
                    <td id="tr1_2">
                        <center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png"></center>
                    </td>
                </tr>
                <tr id="tr2">
                    <td id="tr2_1"><center>drag something into me</center></td>
                    <td id="tr2_2"><center>drag something into me</center></td>
                </tr>
            </table>
        </center>
    </body>
</html>

所以我的第一个问题是图像只被丢弃到Left单元格表，而不是所有单元格。然后第二个问题是当完成拖放时，图像应该从startDrag单元格中删除，并且只出现在目标单元格中。

Answer 1

使用HTML 5拖放功能

myPic = document.getElementById('refImage');

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.innerHTML=''
    ev.target.appendChild(document.getElementById(data));
}

img{
  width:50px;
  height:50px
}
td{
  width:60px;
  height:60px
}

<html>
<head>
    <title>Drag and Drop</title>
</head>
<body>
    <center>
        <h3><li>Drag and Drop Section</li></h3>
            <table border="1" width="50%" height="50%">
                <tr>
                    <td><center><b>colonne 1</b></center></td>
                    <td><center><b>colonne 2</b></center></td>
                </tr>
                <tr id="tr1">
                    <td id="tr1_1" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <center>drag something into me</center>
                    </td>
                    <td id="tr1_2"ondrop="drop(event)" ondragover="allowDrop(event)">
                        <center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png" draggable="true"
ondragstart="drag(event)"></center>
                    </td>
                </tr>
                <tr id="tr2">
                    <td id="tr2_1" ondrop="drop(event)" ondragover="allowDrop(event)"><center>drag something into me</center></td>
                    <td id="tr2_2" ondrop="drop(event)" ondragover="allowDrop(event)"><center>drag something into me</center></td>
                </tr>
            </table>
        </center>
    </body>
</html>

拖放html表格单元格纯javascript和html

1 个答案: