Drag'n'Drop & scrolling within DIV (overflow) [Archive]

View Full Version : Drag'n'Drop & scrolling within DIV (overflow)

mherger

24 Aug 2007, 3:51 AM

Hi there!

I'm desperately trying to get D'n'D in a simple DIV working - no luck so far...

The DIV is set to overflow:auto. But whether I set scroll in DD true or false, it doesn't scroll the div. With scroll:true it would scroll the full page instead.

Here's a very bare naked sample of my page. #playList is the element which will house the list, the elements to be dragged have the .browsedbListItem class:

[CODE]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.EventManager.onDocumentReady(function(){
Ext.dd.ScrollManager.register('rightcontent');
items = Ext.DomQuery.select('div.selectorMarker');
for(var i = 0; i < items.length; i++) {
var dd = new Ext.dd.DDProxy(items[i], 'playlist', {
scroll: false
});
}
});
</script>

<style>
.browsedbListItem {
border: 1px solid black;
}
#playList {
width: 400px;
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div id="rightcontent">

<div id="playList">

<div class="currentSong" id="playlistSong0Selector"><div class="selector_topRight"><div class="selector_topLeft"><div class="selector_bottomRight"><div class="selector_bottomLeft">
<div class="browsedbListItem itemWithCover">
<div class="playlistSongDetail">
<a href="/songinfo.html?item=5618&player=6a%3Aaf%3Ae7%3A68%3A48%3Aa8" class="browseItemLink">2-6. I Remember</a>
</div>

<div class="playlistSongDetail">
<a href="/browsedb.html?hierarchy=album,track&level=1&album.id=604&player=6a%3Aaf%3Ae7%3A68%3A48%3Aa8" class="browseItemLink">MTV Unplugged</a>
</div>

<div class="playlistSongDetail">
<a href="/browsedb.html?hierarchy=contributor,album,track&contributor.id=143&artwork=1&level=1&player=6a%3Aaf%3Ae7%3A68%3A48%3Aa8" target="browser" class="browseItemLink">Lauryn Hill</a>
</div>
<span id="playlistSong0"></span>
<div class="playlistControls" style="display: none;">
<img onclick="Player.playerControl(['playlist', 'index', '0'])" src="/html/images/b_play.png" width=15 height=15 alt="Wiedergabe" title="Wiedergabe">
<img onclick="Player.playerControl(['playlist', 'delete', '0'])" src="/html/images/b_delete.png" width=15 height=15 alt="L

jsakalos

25 Aug 2007, 3:02 PM

Try to set containerScroll:true on your DropTarget or DropZone.

Cheers,

mherger

27 Aug 2007, 12:21 AM

Jozef,

thanks for the pointer. But I'm still completely lost with d'n'd. I just can't find a simple introduction or example explaining how d'n'd is to be implemented :-(. There's a lot been written, even more asked. And it's easily implemented with controls like tree, which are prepared to be used with d'n'd. But how to do it with my own HTML code? No idea.

What's the very basic code needed to implement a simple d'n'd of a list of elements? While the sample code above does work, I do not know where to add the property you've mentionend...

Kind regards,

Michael

jsakalos

27 Aug 2007, 1:05 AM

Yeah,

DD is probably one of the oldest part of Ext code and make it working can be sometimes tricky. I know, I'd been in your shoes a couple of weeks ago and I've solved my confusions by reading source code.

Try to add containerScroll:true to the DDProxy config (instead of scroll:true).

You can also check my extension http://aariadne.com/accordion-preview; I use D&D there.

Cheers,

mherger

27 Aug 2007, 5:55 AM

Thanks again for your help. But it still does not work :-(.

I guess I'll have to dig through a few hundred lines of code first...

Michael

jsakalos

27 Aug 2007, 7:59 AM

Thanks again for your help. But it still does not work :-(.

I guess I'll have to dig through a few hundred lines of code first...

Michael

I'd start with tree DD to find out how it's done there as tree's container scrolls fine while dragging.

Good luck!

jarrod

27 Aug 2007, 11:40 PM

Note that you should register the element which has the scrollbar with the ScrollManager, e.g. playList instead of rightcontent?

This thread might help:

http://extjs.com/forum/showthread.php?t=11495

mherger

28 Aug 2007, 2:12 AM

Note that you should register the element which has the scrollbar with the ScrollManager, e.g. playList instead of rightcontent?

Oh my... thanks a lot. That did it!

Now off to new unknown ground...

Michael