注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery拖拽插件Shapeshift v2.0应用

UI fishcity 2667浏览

query拖拽插件Shapeshift

Shapeshift v2.0是一款非常强大的基于jquery拖拽插件,它可以实现多个拖放功能,如果拖拽克隆,拖拽洗牌,拖拽销毁,多宽度拖拽,拖拽嵌入等,喜欢的朋友可以研究下,它代码简洁,容易上手,下面就来看下它的使用方法吧。

引入核心文件

 <!-- jQuery / jQuery UI -->
  <script src="http://ajax.useso.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://ajax.useso.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!-- jQuery Touch Punch - Enable Touch Drag and Drop -->
  <script src="core/vendor/jquery.touch-punch.min.js"></script>

  <!-- jQuery.Shapeshift -->
  <script src="core/jquery.shapeshift.js"></script>

构建html

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

写入CSS样式

 .container {
      border: 1px dashed #CCC;
      position: relative;
    }

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

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

写上JS实现效果

$(document).ready(function() {
      $(".container").shapeshift();
    })

转载请注明:jQ酷 » jquery拖拽插件Shapeshift v2.0应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。