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条)

报告相同问题?

悬赏问题

  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测,loss值优化,参数优化算法
  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP