jackforce 2008-12-30 20:51
浏览 144
已采纳

scriptaculous 拖拽问题

看上去是zindex的bug



测试环境是IE7



测试代码如下.





<html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://script.aculo.us/prototype.js"&gt;&lt;/script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"&gt;&lt;/script>
<title>Demo 2</title></head><body>


<script type="text/javascript">
new Draggable('drag_demo_1',{zindex:100,
onDrag: function(event) {
//alert($('drag_demo_1').style.zindex);alert($('drag_demo_3').style.zindex);
},

onStart: function(event) {$('drag_demo_1').style.zindex = 2000;}

                      }
                      );
              &lt;/script&gt;


<script type="text/javascript">
new Draggable('drag_demo_3',
{ scroll: window,zindex: 100,
onStart: function(event) {$('drag_demo_3').style.position = 'absolute';},

onEnd: function(event) {$('drag_demo_3').style.zindex = 10; }});
</script>

/body></html>



上面页面运行会出现绿色和蓝色方块,可以随意拖拽.我希望能够随意调整两个拖拽层的上下位置.现在只能固定在绿上,蓝下的位置,反过来不行.



虽然Draggable有zindex属性,不过没有任何用处,在callback函数中尝试调整zindex,同样也没有任何作用.



这个地方,除了调整zindex 来控制显示上下位置之外,还有什么办法?




问题补充:
这个怎么被移动到这里来了,实际上我已经解决这个问题了



出现这个问题的原意是:



1.div的定义顺序有关,而且都是z-index为0



2.拖拽结束之后并不修改原div的z-index值,所以在前面的一直在前面。



3.拖拽的几个回调函数中无法修改对应div的z-index值,因为回调函数调用结束之后,后面还有代码会执行,会把新建拖拽对象的时候div的初始z-index值设置回去。



4.拖拽代码中设置的zindex值只是在拖拽过程中有效,放下来了,起作用的还是原先的div zindex值



不过还是感谢 hanjs 做出的辛苦工作。

  • 写回答

3条回答 默认 最新

  • hanjs 2008-12-30 20:51
    关注

    解决了,
    1、将dragdrop.js中的默认值zindex改为0
    2、其他的按下面代码调整下。

    [code="java"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    var div_z_index=1; function zIndexAdd(divId) { var divObject=document.getElementById(divId); div_z_index++; divObject.style.zIndex=div_z_index; //请注意:这里是 zIndex 千万不要写成 z-index 否则会出错的 }

    Demo 2



    <br><br> new Draggable(&#39;drag_demo_1&#39;,{//zindex:100,<br><br> onDrag: function(event) {<br><br> },<br><br> onStart: function(event) {zIndexAdd(&#39;drag_demo_1&#39;);</p> <pre><code>} } ); &lt;/script&gt; </code></pre> <div id="drag_demo_3" style="width:80px; height:80px;position: absolute; cursor:move; background:#88da5d; border:1px solid #333;"></div> <p><script type="text/javascript"><br><br> new Draggable(&#39;drag_demo_3&#39;,<br><br> { //scroll: window,zindex: 100,<br><br> onStart: function(event) {zIndexAdd(&#39;drag_demo_3&#39;);</p> <pre><code> }, </code></pre> <p>onEnd: function(event) { }});<br><br>

    [/code]

    不知道为何在外面控制zindex就可以。这个我也是参考dom-drag的例子调整的。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思?
  • ¥15 win10权限管理,限制普通用户使用删除功能
  • ¥15 minnio内存占用过大,内存没被回收(Windows环境)
  • ¥65 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 blast算法(相关搜索:数据库)
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛?
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面