Jquery UI drable

Drable的简单使用

<!doctype html>

<html>

<head>   

<meta charset="utf-8">      

<title>jQuery UI ExamplePage</title>           

<scriptsrc="js/jquery-1.10.2.js"></script>      

<scriptsrc="js/jquery-ui-1.10.4.custom.js"></script>

<link rel="stylesheet"href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">

<style type="text/css">

 #parent{

   border:1px solid #ddd;

   width:250px;  

   height:250px;

   background:gray;

   }

 #child{

 border:1px solid gray;

 width:70px;

 height:70px;

 background:green;

 }

</style>

<script>

  //查看api其中设置属性在对应的交互函数中用{添加属性和属性值}

  //如果添加方法直接用名字调用

  //如果是添加事件则添加到{里面}

 $(function() {

   $( "#child" ).draggable({

    addClasses: false,

    axis: "x",

    containment: "parent",

    cursor: "crosshair",

    start: function( event,helper ) {alert("start");}

   });

   $( "#child" ).draggable();

   $( "#child" ).draggable( "disable" );

   $( "#child" ).draggable( "enable");

  });

</script>

</head>

<body>

<h1>drapable的使用</h1>

<div id="parent">

 parent

 <div id="child">chile</div>

</div>

</body>

</html>

Jquery UI drable,古老的榕树,5-wow.com

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