如何使可拖動的項目覆蓋圖像

我想在拖動時對圖像進行覆蓋，但是當我移動文本區域時它也會移動圖像。所以我希望我的編輯區域透明並覆蓋圖像。請幫助如何使可拖動的項目覆蓋圖像

這是我有拖動對象上

<head> 
<style> 
.positionable { 
    width:100px; height:100px; 
    position:absolute; 
} 
.dragRegion { 
    background-color:#FFF; color:#000; 
    cursor:move; 
    top: -2px; left: -2px; 
    position: absolute; 
    font-size:14px; line-height:14px; 
    margin: -5px; 
    padding-left: 10px; 
    padding-top: 10px; 
    background-image:url('arrow_move.png'); 
    background-repeat:no-repeat; 

} 
.editable { 
    width: 150px; height: 150px; padding: 0.5em; 
    position:relative; 
} 

</style> 

</head> 
<body> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> 

<div class="positionable"> 
    <div class="dragRegion"/> 
    <textarea id="resizable" rows="5" cols="20"></textarea> 

    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" /> 
<script type="text/javascript"> 
      $('.positionable').draggable({handle: '.dragRegion'}); 
     $('.editable').resizable(); 
</script> 
</div>

來源

2012-02-10 Dmitry Savy

使用的z-index。例如：

.dragRegion { 
     z-index:500 
     .... old css code 
    }

您設置的密碼在你的CSS

來源

2012-02-10 07:42:41

謝謝，但還是不行 – 2012-02-10 07:46:04

哦，我想我missunderstod你。但是可定位對象使圖像變得可拖曳。所以你必須關閉它之前的形象：檢查這一個，http://jsbin.com/apocid/edit#javascript,html – 2012-02-10 07:55:41

非常感謝你，太棒了！ – 2012-02-10 08:26:55

如何使可拖動的項目覆蓋圖像

回答

相關問題