Home/ Questions/Q 7446589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T12:21:16+00:00

I am trying to make overlay over image while dragging but its also moving

  • 0

I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help

Here is what I have 

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use z-index on the draggable object.
    For example:

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

    You set the code in your CSS

    • 0