kinetic实现兼容手机端方块拖动到正确位置吸入动画效果代码-html代码-BFW代码库

kinetic实现兼容手机端方块拖动到正确位置吸入动画效果代码

代码语言：html

所属分类：拖放

代码描述：kinetic实现兼容手机端方块拖动到正确位置吸入动画效果代码，兼容手机端移动端触屏操作。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script>





    <style>
        body{
          margin:0;
          padding:0;
        }
        
        #bg {
          background-color:#1e1e1e;
          position:fixed;
          width:100%;
          height:100%;
        }
    </style>


</head>

<body>
    <div id="bg"></div>
    <div id="container"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kinetic-5.1.0.js"></script>
    <script>
        var stage;
        var initCoords = {x:0, y:0};
        
        $(document).ready(function(){
          
          function writeMessage(message) {
                text.text(message);
                layer.draw();
              }
              
              stage = new Kinetic.Stage({
                container: 'container',
                width: 1024,
                height: 800
              });
              
              var layer = new Kinetic.Layer();
        
              var text = new Kinetic.Text({
                x: 10,
                y: 10,
                fontFamily: 'Calibri',
                fontSize: 24,
                text: 'Drag the blue rectangle inside (or outside) of the yellow one and Drop it',
                fill: 'white'
              });
              
              var box = new Kinetic.Rect({
                x: 589,
                y: 100,
                offset: [50, 25],
                width: 100,
                height: 50,
                fill: '#00D2FF',
                stroke: 'black',
                strokeWidth: 4,
                draggable: true
              });
          
              var boxTarget = new Kinetic.Rect({
                x: 100,
                y: 100,
                offset: [50, 25],
                width: 200,
                height: 100,
                fill: '#fec72c',
                stroke: 'white',
                strokeWidth: 4,
                draggable: false,
                name: "droppable"
              });
          
        
              // write out drag and drop events
              box.on('dragstart', function(e) {
                writeMessage('dragstart');
                initCoords = {x:e.target.x(), y:e.target.y()};
    .........完整代码请登录后点击上方下载按钮下载查看