Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Здравствуйте Вопрос по Drag and drop
 
 автор: zorg84   (06.10.2012 в 23:59)   письмо автору
 
 

Здравствуйте Вопрос по Drag and drop

есть фото внутри блока див которое перемещаю вертикально

как сделать чтобы фото не выходило за рамки этого дива
пример кода


<div id="sss"style="border:solid black; height:600px;
 width:600px;margin-left:50%;top:100;z-index: 20;">
 <img src='214115092012.png' style='position:absolute;left:50%;top:100;z-index: 21;' id='img'>
</div>

<script>
//elemX=0;// Глобальная координата x нажатия мыши относительно элемента
elemY=0;// Глобальная координата y нажатия мыши относительно элемента
drag=false;// Глобальная переменная, разрешающая или запрещающая перемещение элемента
function $$(id)
{
return document.getElementById(id);
}
$$('img').onmousedown = function(e){

               e = e || window.event;
              //elemX=e.clientX+document.body.scrollLeft-parseInt($$('img').style.left);
              elemY=e.clientY+document.body.scrollTop-parseInt($$('img').style.top);
              
              drag=true;
                          }
$$('img').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false;}
document.onmousemove = function(e) {
            e = e || window.event;
            //elx=parseInt(e.clientX)-elemX;
            ely=parseInt(e.clientY)-elemY;
            if(drag){
            //$$('img').style.left=e.clientX+document.body.scrollLeft-elemX;
            $$('img').style.top=e.clientY+document.body.scrollTop-elemY;
            }
            
            }
        
        
</script>
/div

  Ответить  
 
 автор: confirm   (07.10.2012 в 09:37)   письмо автору
 
   для: zorg84   (06.10.2012 в 23:59)
 

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

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования