Javascript 如何使可拖动项覆盖在图像上_Javascript_Jquery

Javascript 如何使可拖动项覆盖在图像上

javascript jquery

Javascript 如何使可拖动项覆盖在图像上,javascript,jquery,Javascript,Jquery,我试图在拖动图像时覆盖图像，但在移动文本区域时也覆盖移动图像。所以我希望我的编辑区域是透明的，覆盖图像。请帮忙这是我的 <head> <style> .positionable { width:100px; height:100px; position:absolute; } .dragRegion { background-color:#FFF; color:#000; cursor:move; top: -2px; left:

我试图在拖动图像时覆盖图像，但在移动文本区域时也覆盖移动图像。所以我希望我的编辑区域是透明的，覆盖图像。请帮忙

这是我的

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


.可定位{
宽度：100px；高度：100px；
位置：绝对位置；
}
dragRegion先生{
背景色：#FFF；颜色：#000；
光标：移动；
顶部：-2px；左侧：-2px；
位置：绝对位置；
字体大小：14px；行高：14px；
保证金：-5px；
左侧填充：10px；
填充顶部：10px；
背景图片：url（'arrow_move.png'）；
背景重复：无重复；
}
.可编辑{
宽度：150px；高度：150px；填充：0.5em；
位置：相对位置；
}
$（'.positionable'）.draggable（{handle:'.dragRegion'}）；
$（'.editable'）.resizable（）；

在可拖动对象上使用z索引。例如：

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

你在CSS中设置了代码

哦，我想我理解错了。但可定位对象使图像可拖动。所以你必须在图片之前关闭它：检查这个，非常感谢，太棒了！