jQuery拖拽插件Shapeshift

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery拖拽插件Shapeshift 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
  <meta charset="gb2312">
  <title>jQuery��ק���Shapeshift</title>
  <!-- jQuery / jQuery UI -->
  <script src="js/jquery-1.7.2.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <!-- jQuery Touch Punch - Enable Touch Drag and Drop -->
  <script src="js/jquery.touch-punch.min.js"></script>
  <!-- jQuery.Shapeshift -->
  <script src="js/jquery.shapeshift.js"></script>
  <!-- CSS -->
  <style>
    .container {
      border: 1px dashed #CCC;
      height: 200px;
      position: relative;
    }

    .container > div {
      background: #AAA;
      position: absolute;
      height: 100px;
      width: 100px;
    }

    .container > .ss-placeholder-child {
      background: transparent;
      border: 1px dashed blue;
    }
  </style>

  <!-- Javascript -->
  <script>
    $(document).ready(function() {
      $(".clones").shapeshift({
          dragClone: true,
          enableCrossDrop: false
      });
      $(".droparea").shapeshift({
        colWidth: 100
      });
    })
  </script>
</head>
<body>
  <div class="container clones">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
  </div>
  <div class="container droparea">
  </div>
  <div class="container droparea">
  </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)