Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Opera, FF + ondrag etc.....

Автор: Serge2k 10.7.2005, 21:44

Господа.... Помогите пожалуйста.... Нужно как то заставить работать скрипт... Это я так, сваял за минуту, чтоб отразить суть проблемы... Этот скрипт чудно работает в IE и не пашет в опере и FF.... Может объясните, как эту проблемку решить......Жду от Вас помощи и понимания... smile

Код


<style type="text/css">
    #m1{
        position: absolute;
        top:100;
    }
</style>
<script language="JavaScript">
    function drag(obj_id){
        var object = document.getElementById(obj_id);
        var evt = (evt) ? evt : ((window.event) ? event : null);
        object.style.left = evt.clientX + 'px';
        object.style.top = evt.clientY + 'px';
        
    }
</script>

<img id="m1" src="1.jpg"  ondrag="drag('m1');">

Автор: Aliance 10.7.2005, 23:50

Исправил код:

Код


// Глобальные переменные
var cordsX;
var cordsY;
var object;

function setObject (evt) {
   var target = (evt.target) ? evt.target : evt.scrElement;
   object = (target.name) ? document.getElementById(target.name) : null;
}

function turn_on (evt) {
   evt = (evt) ? evt : ((window.event) ? event : null);
   setObject(evt);
   if (document.body && document.body.setCapture) {
      // перехват событий для IE
      document.body.setCapture();
   }
   if (evt.pageX) {
      cordsX = evt.pageX - ((object.offsetLeft) ? object.offsetLeft : object.left);
      cordsY = evt.pageY - ((object.offsetTop) ? object.offsetTop : object.top);
   } else if (typeof evt.offsetX != "undefined") {
      cordsX = evt.offsetX - ((evt.offsetX < -2) ? 0 : document.body.scrollLeft);
      cordsX -= (document.body.parentElement && 
                       document.body.parentElement.scrollLeft) ? 
                       document.body.parentElement.scrollLeft : 0;
      cordsY = evt.offsetY - ((evt.offsetY < -2) ? 0 : document.body.scrollTop);
      cordsY -= (document.body.parentElement && 
                       document.body.parentElement.scrollTop) ? 
                       document.body.parentElement.scrollTop : 0;
   } else if (typeof evt.clientX != "undefined") {
      cordsX = evt.clientX - ((object.offsetLeft) ? object.offsetLeft : 0);
      cordsY = evt.clientY - ((object.offsetTop) ? object.offsetTop : 0);
   }
   return false;
}

function drag (evt) {
   evt = (evt) ? evt : ((window.event) ? event : null);
   if (object) {
      if (evt.pageX) {
         object.style.left = evt.pageX - cordsX;
         object.style.top = evt.pageY - cordsY;
      } else if (evt.clientX || evt.clientY) {
         object.style.left = evt.clientX - cordsX;
         object.style.top = evt.clientY - cordsY;
      }
      evt.cancellBubble = true;
      return false;
   }
}

Проблема в том, что ты неверно (точнее верно, но только для событийной модели IE) определял сдвиг.
Подробнее читай в прикрепленном топике «Все о событиях».

Кстати, на будущее - разделяй код CSS от кода JS с соответствующей подсветкой.
Добавлено @ 23:51
Написал это за 10 минут, не проверяя, т.к. иду спать. С утра проснусь - проверю.

Автор: Sardar 11.7.2005, 01:58

Serge2k проблема в том, что ondrag и ещё куча других событий нигде кроме как ИЕ не существуют. Ловим по старинке onmousedown, onmouseup и onmousemove.

Автор: Serge2k 11.7.2005, 10:07

Ну а то что эти события работают тока в IE, это ваще подстава.... очень обидно.... Но всем большое человеческое спасибо.... smile

Автор: Serge2k 11.7.2005, 10:56

Мдя.... Но моих знаний JS и DOM для разбора данного скрипта явно не хватает.... smile

Автор: Aliance 11.7.2005, 11:41

Нет, можно не только в ИЕ. Читай внимательнее пост Sardarа

Автор: Serge2k 11.7.2005, 12:34

Aliance
Пасиб, что не пожалел времени и написал мне этот скриптик.... Тока вот мои познания в DHTML пока достаточно скудны... Так что напиши пример с ипользованием этих ф-ций... а то я не совсем понимаю....

Автор: Sardar 11.7.2005, 14:09

Простейший пример. Код находит все слои с классом fly и добавляет им обработчиков событий. Сами обработчики тоже простые. Вычисление координат это довольно кривая тема JS и долбанного наследия, поэтому что бы их правильно вычислить, смотри код Aliance.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Pos test</title>
<style type="text/css">
.fly {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: #7475f6;
  color: white;
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding-top: 40px;
  left:100px;
}
</style>
</head>

<body>
<div class="fly">Drag me</div>

<script type="text/javascript">
function mdown(e) {
  this.dragging=true;
  this.offX=window.event? window.event.offsetX: e.layerX;
  this.offY=window.event? window.event.offsetY: e.layerY;
}
function mup() {this.dragging=false;}
function mmove(e) {
  if(!this.dragging) return false;
  var evt=window.event? window.event: e;
  this.style.left=(document.body.scrollLeft+evt.clientX-this.offX)+"px";
  this.style.top=(document.body.scrollTop+evt.clientY-this.offY)+"px";
  return true;
}

var flys=document.getElementsByTagName("DIV");
for(var i=0; i<flys.length; i++) {
  if(flys[i].className!="fly") continue;
  flys[i].onmousedown=mdown;
  flys[i].onmouseup=mup;
  flys[i].onmousemove=mmove;
  flys[i].onselectstart=function(){return false;}; //для ИЕ, что бы не селектировал текст, остальные в отстое
}
</script>
</body>
</html>

Заменить div на img думаю сам сможешь smile

Автор: Serge2k 11.7.2005, 20:03

Я уже замучался с этим глупым drag & drop.... Никогда раньше не думал, что в нет нормального стандарта для javascript... В одних браузерах работает.... в других нет.... ну что зща отврат...
Sardar Твой например не работает в опере... написал такой вариант.... Так он не хочет работать в FF и ваще глючно работает... Книжку, где описывается вся эта лабуда, я толком найти не смог... В итоге наверное помучаюсь денек другой и поеду покупать книгу из списка, который у Вас на форуме есть... А вот что я написал... Подозреваю, что тут просто не учтены различия между браузерами...

Код


<script type="text/javascript">
    var object;
    var dragging;
    var start_x,start_y;
    function startdragging(event){
        dragging = true;
        object = event.srcElement;
        start_x = event.clientX - object.offsetLeft;
        start_y = event.clientY - object.offsetTop;
    }
    function finishdragging(){
        dragging = false;
        object = null;
    }
    function drag(event){
        if( dragging && (object != null) ){
            object.style.left = event.clientX - start_x + "px";
            object.style.top = event.clientY - start_y + "px";
        }
    }

</script>
<body  onmousedown="startdragging(event)" onmouseup="finishdragging()" onmousemove="drag(event)">
    <img id="m1" src="2.jpg">
</body>

Автор: Guest 11.7.2005, 20:06

а твой код Aliance я просто запустить не могу, т.к. не понимаю, на какое какую ф-цию прилепить к какому событию... Да... кстати, Sardar а можно вот это:

Код


var flys=document.getElementsByTagName("DIV");    
for(var i=0; i<flys.length; i++) {    
  if(flys[i].className!="fly") continue;    
  flys[i].onmousedown=mdown;    
  flys[i].onmouseup=mup;    
  flys[i].onmousemove=mmove;    
  flys[i].onselectstart=function(){return false;}; //для ИЕ, что бы не селектировал текст, остальные в отстое    
}

заменить на что нить более короткое... просто у меня не обин объек надо будет двигать.... и если для каждого придется писать такую штуку, то....

Автор: Serge2k 11.7.2005, 20:16

Aliance
на этом вылетает ошибка

Код


object = (target.name) ? document.getElementById(target.name) : null;

Автор: Aliance 11.7.2005, 23:29

А HTML код картинки дай.

Автор: Sardar 12.7.2005, 01:53

Цитата(Guest @ 11.7.2005, 19:06)

и если для каждого придется писать такую штуку, то....

Ты не совсем понял, тот код выбирает все слои и инициализирует те кто имеет аттрибут class="fly". Заменив DIV на IMG мы выберем все картинки на странице.

Если элемент один, то выбери его по ID, затем установи ему все обработчики событий. Тогда цикл не нужен.

А с координатами, просто Оперы под рукой не было. А вообще это больная тема в JS, нужно будет разово статью с кодом написать и в FAQ, а то самому иногда нужно smile