教程集 > 脚本编程 > javascript > 正文各种类型的托拽，效果

各种类型的托拽，效果

发布时间：2023-06-28 编辑：jiaochengji.com

教程集为您提供各种类型的托拽，效果等资源，欢迎您收藏本站，我们将为您提供最新的各种类型的托拽，效果资源

提示：您可以先修改部分代码再运行

<p>  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /></p>  <script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/<a href="http://www.jiaochengji.com/
" target="_blank" class="inner-link">jquery</a>/jquery.js"></script><script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/interface/interface.js"></script>  <p>style type="text/css" media="all"> * { margin: 0; padding: 0; } html{ height: 100%; } body { background: #fff; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } #download { position: absolute; text-align: center; font-weight:bold; width: 300px; height: 30px; line-height: 30px; bottom: 0; left: 50%; margin-left: -150px; background-color: #000; color: #fff; } .selectable { background: #fff; width: 100%; height: 100%; } .selectableItem { display: block; width: 140px !important; width /**/: 160px; padding: 0 10px; line-height: 24px; height: 24px; position: absolute; background-image: url(images/pill_down.png); font-weight: bold; color: #000; } .selecteditem { background-image: url(images/pill_down_selected.png); } .selecthelper { border: 1px dotted #999; background-color: #FFFFCC; } .serializer { clear: both; margin: 20px 0; } .serializer a { color: #33f; } .serializer a:hover { color: #FF6600; } .msd { width: 850px; } #idg{top: 20px;left: 10px;} #idp{top: 50px;left: 10px;} #ir{top: 80px;left: 10px;} #is{top: 110px;left: 10px;} #ist{top: 140px;left: 10px;} #isr{top: 170px;left: 10px;} #it{top: 200px;left: 10px;} #ea{top: 20px;left: 180px;} #xac{top: 50px;left: 180px;} #xacl{top: 80px;left: 180px;} #xas{top: 110px;left: 180px;} #xbd{top: 140px;left: 180px;} #xbe{top: 170px;left: 180px;} #xd{top: 200px;left: 180px;} #xf{top: 230px;left: 180px;} #xs{top: 260px;left: 180px;} #xh{top: 290px;left: 180px;} #xo{top: 320px;left: 180px;} #xp{top: 350px;left: 180px;} #xsc{top: 380px;left: 180px;} #xsh{top: 410px;left: 180px;} #xsl{top: 440px;left: 180px;} #xt{top: 470px;left: 180px;} #ca{top: 20px;left: 350px;} #ac{top: 50px;left: 350px;} #ie{top: 80px;left: 350px;} #iac{top: 110px;left: 350px;} #ias{top: 140px;left: 350px;} #fi{top: 170px;left: 350px;} #im{top: 200px;left: 350px;} #isl{top: 230px;left: 350px;} #itt{top: 260px;left: 350px;}</p>  <div class="selectable" id="selectable1">  <div class="selectableItem" id="ca">3D Carousel</div>  <div class="selectableItem" id="ac">Acordion</div>  <div class="selectableItem" id="ie">Autoexpand</div>  <div class="selectableItem" id="iac">Autocomplete</div>  <div class="selectableItem" id="ias">Autoscroller</div>  <div class="selectableItem" id="fi">Fisheye</div>  <div class="selectableItem" id="im">Imagebox</div>  <div class="selectableItem" id="isl">Slideshow</div>  <div class="selectableItem" id="itt">TTabs</div>  <div class="selectableItem" id="idg">Draggables</div>  <div class="selectableItem" id="idp">Droppables</div>  <div class="selectableItem" id="ir">Resizables</div>  <div class="selectableItem" id="is">Selectables</div>  <div class="selectableItem" id="ist">Sortables</div>  <div class="selectableItem" id="isr">Slider</div>  <div class="selectableItem" id="it">Tooltip</div>  <div class="selectableItem" id="ea">easing formulas</div>  <div class="selectableItem" id="xac">animateClass</div>  <div class="selectableItem" id="xacl">animateColor</div>  <div class="selectableItem" id="xas">animateStyle</div>  <div class="selectableItem" id="xbd">blind</div>  <div class="selectableItem" id="xbe">bounce</div>  <div class="selectableItem" id="xd">drop</div>  <div class="selectableItem" id="xf">fold</div>  <div class="selectableItem" id="xs">grow/shrink</div>  <div class="selectableItem" id="xh">highlight</div>  <div class="selectableItem" id="xo">open/close/switch</div>  <div class="selectableItem" id="xp">pulsate</div>  <div class="selectableItem" id="xsc">scroll</div>  <div class="selectableItem" id="xsh">shake</div>  <div class="selectableItem" id="xsl">slide</div>  <div class="selectableItem" id="xt">transfer</div>  <div id="download">Download your selecion</div>  </div>  <script type="text/javascript">  var initPos = false;  var collection = false;  $(document).ready(   function()   {    $('#selectable1').Selectable(     {      accept : 'selectableItem',      selectedclass : 'selecteditem',      opacity: 0.2,      helperclass : 'selecthelper'     }    );    $('div.selectableItem').Draggable(     {      snapDistance : 10,      onStart: function(cloneEl, x, y) {       if (jQuery(this).is('.selecteditem')) {        initPos = {x: x, y:y};        collection = jQuery('div.selecteditem').not(this).not(cloneEl);        if (collection.size() == 0) {         initPos = false;         collection = false;        }       }       },            onDrag: function(x, y) {       if(collection) {        collection.each(         function() {          this.style.left = this.offsetLeft   x - initPos.x   'px';          this.style.top = this.offsetTop   y - initPos.y   'px';         }        );        initPos = {x: x, y:y};       }      },      onStop : function()      {       initPos = false;       collection = false;      }     }    );   }  );    function serialize()  {   serial = $.Selectserialize('selectable1');   alert(serial.hash);  }  </script>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
C#委托介绍与简单示例
 jQuery 版元素拖拽原型代码
 C#入门学习笔记之C#匿名方法
 HTML5的WebGL3D档案馆图书可视化管理系统的实现
 HTML5 DragEvent接口的实例讲解
 javascript简单拖拽效果代码
 ASP.NET2.0泛型和匿名方法介绍
 C#泛型：泛型特点、泛型继承、泛型接口、泛型委托学习笔记
 HTML5实现拖拽批量上传文件的代码
 简单的jquery拖拽排序效果实现代码

上一篇：改变textarea的大小下一篇：js实现的翻页效果

[关闭]

各种类型的托拽，效果

最近更新

浏览排行