Question

我正在尝试在拖动时对图像进行叠加，但是当我移动我的textarea时它也会移动图像。所以我希望我的编辑区域是透明的并覆盖图像。请帮忙

这就是我所拥有的

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

Answer 1

在可拖动对象上使用z-index。例如：

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

您在CSS中设置代码

如何使可拖动项目覆盖图像

1 个答案: