ドラッグ可能なアイテムをイメージ上にオーバーレイする方法

私はドラッグ中にオーバーレイを作成しようとしていますが、テキストエリアを移動するとイメージも移動しています。だから私は私の編集領域を透明にし、イメージをオーバーレイしたい。ここでドラッグ可能なアイテムをイメージ上にオーバーレイする方法

は、私はドラッグ可能なオブジェクト上

<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インデックスを持っているものです助けてください。たとえば：

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

あなたのCSSに

出典

2012-02-10 07:42:41

おかげでコードを設定し、それがああ、私はあなたをmissunderstod考える –

動作しません。しかし、配置可能なオブジェクトは、イメージをドラッグ可能にします。だからあなたはイメージの前にそれを閉じなければなりません：これをチェックしてください、http://jsbin.com/apocid/edit#javascript,html –

ありがとう、ファンタスティック！ –

ドラッグ可能なアイテムをイメージ上にオーバーレイする方法

答えて

関連する問題