Перетаскиваемая проблема div в IE7 - PullRequest
Новая
       14

Перетаскиваемая проблема div в IE7

0 голосов
/ 19 августа 2009

В этом примере используются mootools, но я вижу такое же поведение с scriptaculous.

У меня есть div с некоторым содержимым, в данном случае один X, и вокруг содержимого много пустого пространства. Я делаю div перетаскиваемым, но мне трудно перетаскивать div в IE. В IE мне нужно нажать и перетащить прямо на содержимое div, один X. Если я щелкаю в div, но далеко от X, div просто сидит там.

В FF, Chrome и Safari он работает так, как ожидается.

Вот полный рабочий пример с mootools. Вам нужно будет обновить теги скрипта, чтобы они отражали то, что вы назвали своими библиотеками mootools. (при редактировании я также добавил сценарий) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Mootools problem</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<style type="text/css">
#my-drag{
  width: 100px;
  height: 100px;
  border: solid 1px black;
}
#my-drag p{
  text-align: center;
}
</style>
<script type="text/javascript">
function start() {
  var e = $('my-drag');
  e.makeDraggable();
}
</script>       
</head>
<body onload="start();">
<div id="my-drag">
  <p>X</p>
</div>
</body>  
</html>

Вот тот же пример, использующий прототип scriptaculous - та же проблема 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>IE Drag problem</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<style type="text/css">
#my-drag{
  width: 100px;
  height: 100px;
  border: solid 1px black;
}
#my-drag p{
  text-align: center;
}
</style>
<script type="text/javascript">
    function start() {
        new Draggable('my-drag', { starteffect: null, endeffect: null }); ;
    }
</script>       
</head>
<body onload="start();">
<div id="my-drag">
  <p>X</p>
</div>
</body>  
</html>

1 Ответ

0 голосов
/ 21 августа 2009

Прекрасно работает для меня с последними версиями prototype (1.6.0.3) и scriptaculous (1.8.2). Чтобы исправить с помощью mootools, попробуйте добавить position:relative к #my-drag.

...