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

how to make draggable item be overlay over image

本文关键字：图像 覆盖 项目 何使可 拖动      更新时间：2023-09-26

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

这是我的

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

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

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

您在CSS 中设置代码

相关文章：