首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 关于draggable的一些小问题.如何取消放入的容器呢?

关于draggable的一些小问题.如何取消放入的容器呢?

时间：2009-04-01

来源：互联网

复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>New Web Project</title>
  7.         <link type="text/css" href="lib/jquery/css/ui.theme.css" rel="stylesheet" />
  8.         <script src="lib/jquery/jquery-1.3.2.js"></script>
  9.         <script src="lib/jquery/ui/ui.core.js"></script>
  10.         <script src="lib/jquery/ui/ui.draggable.js"></script>
  11.         <script src="lib/jquery/ui/ui.sortable.js"></script>
  12.         <style>
  13.             .clear{
  14.                 clear:both;
  15.             }
  16.             ul{
  17.                 list-style-type: none;
  18.                 margin: 0;
  19.                 padding: 0;
  20.             }
  21.             li{
  22.                 margin: 5px;
  23.                 padding: 5px;
  24.             }
  25.             #panel_1{
  26.                 
  27.             }
  28.             #panel_1 li,#panel_2 li{
  29.                 border:1px solid #000;
  30.                 float:left;
  31.             }
  32.             #panel_3{
  33.                 border:1px solid #000;
  34.                 background-color:#8000ff;;
  35.                 height:50px;
  36.                 padding:10px;
  37.                 margin:0;
  38.             }
  39.             #panel_3 li{
  40.                 border:1px solid #000;
  41.                 background-color:#ddd8f5;
  42.                 float:left;
  43.             }
  44.         </style>
  45.         
  46.         <script type="text/javascript">
  47.             $(function() {
  48.                 $("#panel_3").sortable({
  49.                     revert:true
  50.                 })
  51.                 $("#panel_1 > li,#panel_2 > li,#static").draggable({
  52.                     connectToSortable: '#panel_3',
  53.                     helper: 'clone',
  54.                     revert: 'invalid',
  55.                     stop: function() {
  56.                         compute();
  57.                     }
  58.                 })
  59.                 
  60.                 $("#panel_3 > li").draggable({
  61.                     
  62.                 })
  63.                 
  64.                 $("ul, li").disableSelection();
  65.             });
  66.             
  67.             function compute(){
  68.                 $('#value').empty();
  69.                 $('#panel_3 > li').each(function(v1,v2){
  70.                     //$('#value').append($(v2).html());
  71.                 })
  72.             }
  73.             
  74.             function addStatic(value){
  75.                 var li = "<li>"+value+"</li>";
  76.                 $('#panel_3').append(li);
  77.             }
  78.             
  79.             function save(){
  80.                 var value = "";
  81.                 $('#panel_3 > li').each(function(v1,v2){
  82.                     value += $(v2).html()
  83.                 });
  84.                 alert("公式为:"+value);
  85.             }
  86.         </script>
  87.         
  88.     </head>
  89.     
  90.     <body>
  91.         <div class="demo">
  92.             积分类型:    
  93.             <ul id="panel_1">
  94.                 <li id="elem1">新单</li>
  95.                 <li id="elem2">续收</li>
  96.                 <li id="elem3">特殊</li>
  97.             </ul>
  98.             <div class="clear"></div>
  99.             运算符号:
  100.             <ul id="panel_2">
  101.                 <li id="elem1">+</li>
  102.                 <li id="elem2">-</li>
  103.                 <li id="elem3">*</li>
  104.                 <li id="elem4">/</li>
  105.             </ul>
  106.             <div class="clear"></div>
  107.             <div id="static">
  108.                 <input id="staticVal" />
  109.                 <input type="button" value="添加常量" onclick="addStatic($('#staticVal').val())" />
  110.             </div>
  111.             <input value="保存公式" type="button" onclick="save()" />
  112.             <div class="clear"></div>
  113.             <ul id="panel_3">
  114.             </ul>
  115.             <div id="value"></div>
  116.         </div>
  117.     </body>
  118. </html>


我现在已经可以把那些按钮放到下边的框框里.但是怎么拿出来啊?拿出来以后直接消失就可以了..请教高人!

作者: xl45591275   发布时间: 2009-04-01

没人帮忙看看吗?

作者: xl45591275   发布时间: 2009-04-02

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net