html5拖放

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-1.9.1.js"></script>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <style>
        p{
            display: table;
            border: 1px solid;
            width: 482px;
            height: 100px;
        }
        div{
            border: 1px solid;
            width: 482px;
            height: 60px;
        }
        input{
            margin-top: 10px;
            width:40px;
            height: 40px;
        }
        span{
            /*font-size: 30px;*/
            /*line-height: 100px;*/
            text-align: center;
            display: table-cell;
            border: 1px solid;
            width: 100px;
            height: 98px;
            word-wrap: break-word;
            vertical-align: middle;
        }


    </style>
</head>
<body>
    <p><span class="number">请拖动数字放在这里</span><span>+</span><span  class="number">还有这里</span><span>=</span><span id="result">结果</span></p>
    <div>
        <input type="button" value="1" draggable="true">
        <input type="button" value="2" draggable="true">
        <input type="button" value="3" draggable="true">
        <input type="button" value="4" draggable="true">
        <input type="button" value="5" draggable="true">
        <input type="button" value="6" draggable="true">
        <input type="button" value="7" draggable="true">
        <input type="button" value="8" draggable="true">
        <input type="button" value="9" draggable="true">
        <button id="reset">重置</button>
    </div>
<script>
       $("input").on("dragstart",function(evt){
                   event.dataTransfer.setData("inputV",$(this).val());
       })
       $(".number").on("dragover",function(evt){
           event.preventDefault();
       })
       $(".number").on("drop",function(){
           var data = event.dataTransfer.getData("inputV"),
                $result = $("#result");
           $(this).text(data);
          var num1 = $(".number:eq(0)").text(),
              num2 = $(".number:eq(1)").text();
           if(!isNaN(num1) && !isNaN(num2)) {
               $result.text(parseInt(num1) + parseInt(num2));
           }else{
               $result.text("未知结果!")
           }


       })
    $("#reset").on("click",function(){
        window.location.reload();
    })
</script>
</body>
</html>

html5拖放,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。