javascript 简单实现页面上的拖放功能

最新推荐文章于 2024-10-02 05:39:15 发布

Susan_0401

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Amanda2007/archive/2008/05/26/1207672.html

版权

<html>

<head>
<style type="text/css">
td{text-align:center}
th{text-decoration: underline}
.blanks{text-decoration:underline}
</style>
<title></title>
<script type="text/javascript">
var timer;
function setupDrag()
{
    if(event.srcElement.tagName != "TD")
    {
        event.returnValue = false;
    }
    else
    {
        var passedData = [event.srcElement.innerText, event.srcElement.className];
        event.dataTransfer.setData("Text",passedData.join(":"));
        event.dataTransfer.effectAllowed= "copy";
        timer = new Date();
    }
}

function timeIt()
{
    if(event.srcElement.tagName == "TD"&&timer)
    {
        if((new Date())-timer>6000)
        {
            alert("Sorry, time is up,Try again.")
            timer = 0;
        }
    }
}

function cancelDefault()
{
    if(event.srcElement.id.indexOf("blank")==0)
    {
        event.dataTransfer.dropEffect = "copy";
        event.returnValue = false;
    }
}
</script>

</head>

<body οndragstart="setupDrag()" οndblclick="timeIt()">
<center>
<table border="2" cellpadding="5">
   <tr>
      <th>Nouns</th>
      <th>Adjective</th>
   </tr>
   <tr>
      <td class="noun">truck</td>
      <td class="adjective">round</td>
   </tr>
   <tr>
      <td class="noun">doll</td>
      <td class="adjective">red</td>
   </tr>
   <tr>
      <td class="noun">ball</td>
      <td class="adjective">Pretty</td>
   </tr>
</table>
<p id="myP" οndragenter="cancelDefault()" οndragοver="cancelDefault()" οndrοp="handleDrop()">Pat said,"oh my, the<span id="blank1" class="blanks">         </span>is so <span id="blank2" class="blanks">         </span>!"</p>
<button οnclick="location.reload()">Reset</button>
</center>
</body>