View Full Version : Ext.dd.DragZone and UL with float:left LI

23 Apr 2007, 2:02 PM
im experiencing problem with left floated list items inside unsorted list. Dragging isnt even initiated -

using this code:

var GalleryDragZone = function(el, config) {
GalleryDragZone.superclass.constructor.call(this, el, config);
Ext.extend(GalleryDragZone, Ext.dd.DragZone, {

getDragData : function(e){
e = Ext.EventObject.setEvent(e);
var target = e.getTarget('li');
var move = document.createElement('div');
move.id = 'move';
move.innerHTML = $('h3', target).html();
dragData = {
ddel: move
return dragData;
return false;

with HTML:

<ul id="image_gallery_images">
<img src="http://localhost/optika/files/images/utery 025.thumbnail.jpg" alt="Obrazek nejaky" title="Obrazek nejaky" class="image thumbnail" width="100" height="75" />
<a href="/optika/node/29/edit?destination=image_gallery%2F24">Obrazek nejaky</a>
<div class="actions"><a href="/optika/node/29/delete?destination=image_gallery%2F24" class="delete"><img src="/optika/sites/all/modules/image/contrib/image_gallery/images/delete.gif" alt="Smazat" /></a></div>
<img src="http://localhost/optika/files/images/utery 024.thumbnail.jpg" alt="utery 024.jpg" title="utery 024.jpg" class="image thumbnail" width="100" height="75" /><h3><a href="/optika/node/28/edit?destination=image_gallery%2F24">utery 024.jpg</a></h3><div class="actions"><a href="/optika/node/28/delete?destination=image_gallery%2F24" class="delete"><img src="/optika/sites/all/modules/image/contrib/image_gallery/images/delete.gif" alt="Smazat" /></a></div></li>

Styled like this:

#image_gallery_images {
position: relative;
width: 400px;
margin: 0 0 0 190px;

#image_gallery_images li {
float: left;
position: relative;
width: 100px;
margin: 0 0 4px 4px;
padding: 2px;
border: 1px solid #D9EAF5;
font-size: 70%;
background: #fff;

#image_gallery_images li .image {
cursor: move;

If i remove list item floating (from CSS), everything is OK... Any clue?