2012-02-10 3 views
0

Я пытаюсь сделать наложение поверх изображения во время перетаскивания, но его также движущееся изображение, когда я перемещаю свое текстовое поле. Поэтому я хочу, чтобы область редактирования была прозрачной и накладываемой. Пожалуйста, помогитеКак сделать перетаскиваемый элемент наложением поверх изображения

Вот что у меня есть

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

ответ

0

Используйте z-индекс на перетаскиваемом объекта. Например:

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

Вы можете установить код в CSS

+0

Спасибо, но это не работает –

+1

О, я думаю, что я missunderstod вас. Но позиционируемый объект делает изображение привлекательным. Поэтому вы должны закрыть его перед изображением: Проверьте этот, http://jsbin.com/apocid/edit#javascript,html –

+0

Спасибо, Фантастический! –

Смежные вопросы