jqueryUI可拖拽自定义帮手后面相对定位div

我正在与一个拖放事件调度应用程序打架。我有一些相对定位的块，我的可拖动的自定义助手就在他们后面。我已经尝试了各种修复，例如调整不同块的z索引，使用可拖动的“堆栈”选项等。但唯一似乎工作的是从相对块中移除“位置：相对”，这不是“真的是一个选择。jqueryUI可拖拽自定义帮手后面相对定位div

HTML：

<div id="container-one"> 
    <div class="draggable" id="drag-block"></div> 

</div> 

<div id="container-two"> 
    <div class="static-block" id="block-one"></div> 
    <div class="static-block" id="block-two"></div> 
    <div class="static-block" id="block-three"></div> 
</div>

JS：

$(function(){ 
    $('.draggable').draggable({ 
     cursorAt: { bottom: 0, left: 20 }, 
     helper: function(event) 
     { 
      return $("<div class='drag-helper'><h2><i class='fa fa-plus-circle'></i></h2></div>"); 
     } 
    }); 
});

CSS：

#container-one { 
    background-color: orange; 
    width: 200px; 
    height: 400px; 
    display: inline-block; 
} 

#drag-block { 
    background-color: purple; 
    color: white; 
    text-align: center; 
    height: 50px; 
    width: 50px; 

} 

#container-two { 
    background-color: green; 
    height: 400px; 
    width: 500px; 
    display: inline-block; 
} 

.static-block { 
    height: 80px; 
    width: 40px; 
    background-color: cornflowerblue; 
} 

#block-one { 
    position: relative; 
    top: 0; 
    left: 40px; 
} 

#block-two { 
    position: relative; 
    top: 50px; 
    left: 70px; 
} 

#block-three { 
    position: relative; 
    top: 25px; 
    left: 140px; 
} 

.drag-helper { 
    color: yellow; 
    text-shadow: 1px 1px 2px #363636; 
} 

p { 
    font-size: 14pt; 
}

任何想法？ http://jsfiddle.net/voveson/08L32rye/

来源

2015-02-09 Vince

使用的z-index

只是一个简单的解决办法：

.drag-helper { 
    color: yellow; 
    text-shadow: 1px 1px 2px #363636; 
    z-index: 10; // <--- 
}

为我工作的罚款！

http://jsfiddle.net/myawfhx6/1/

来源

2015-02-09 06:02:10 acupajoe

太奇怪了...我可以发誓我试过了。无论如何，我的jsFiddle一定不能接近我的实际代码，因为简单的修补程序在那里不适合我。 – Vince 2015-02-09 06:26:33

jqueryUI可拖拽自定义帮手后面相对定位div

回答

相关问题