PDA

View Full Version : Image Drag And Drop are not displayed.



The Transporter
29 Oct 2009, 8:11 AM
Hello,


I'm trying to drag and drop some images from a panel to another.
The problem is that when I move accross the panel limit, the dragged image is going under.

You can try the script here: http://pol-dev.be/maillots2/

First, pick a color on the first tab for the 'maillot' (grey is good).
Then, on the second tab, try to drag and drop images to the West panel.

As you can see, you cannot go further then the tab panel with the images.

I tried to add a z-index on dragstart but that doesn't change.

Any suggestion ? :(

jay@moduscreate.com
29 Oct 2009, 10:11 AM
yes, that's because the position is "relative" instead of absolute, which will make the z-order effective.

That said, you have a serious dirty bug: http://tdg-i.com/img/screencasts/2009-10-29_1410.swf

The Transporter
29 Oct 2009, 11:27 AM
Hi ! Thanks for your fast reply :)


yes, that's because the position is "relative" instead of absolute, which will make the z-order effective.


I don't understand what you means, what do I have to change ? CSS Style ? of what ?



That said, you have a serious dirty bug: http://tdg-i.com/img/screencasts/2009-10-29_1410.swf

That's fixed ! Thanks for the spot :)

jay@moduscreate.com
29 Oct 2009, 11:41 AM
read up on relative positioning versus absolute.

The Transporter
29 Oct 2009, 11:47 AM
I do know what it is but I don't understand how to apply it, here in that particular case... can you point me a tutorial for that or explain what's wrong in my app ?

jay@moduscreate.com
29 Oct 2009, 11:57 AM
it's hard to tell without looking at your code. You will need to grab the proxy element and set the proper position property!

The Transporter
29 Oct 2009, 12:28 PM
Ok Jgarcia,

This is the code:

I've added the css position:absolute when the dragstart and it's still doing the same.
I like the small flash footage you did, what software do you use to do that ? It's very handy!

This is the part of the code who take care of the Drag And Drop:

This is the html:

<div id="logocontainer">
<img class='logo' src='./_logos/spirou.png' alt='Logo'>
<img class='logo' src='./_logos/gsw.png' alt='Logo'>
<img class='logo' src='./_logos/lakers.png' alt='Logo'>
<img class='logo' src='./_logos/liege.png' alt='Logo'>
<img class='logo' src='./_logos/giant.png' alt='Logo'>
<img class='logo' src='./_logos/symbioz.png' alt='Logo'>
<img class='logo' src='./_logos/virtus.png' alt='Logo'>
<img class='logo' src='./_logos/bree.png' alt='Logo'>
<img class='logo' src='./_logos/dexia-mons-hainaut.png' alt='Logo'>
</div>

This is the Javascript (part of it):

var overrides = {
// Only called when element is dragged over the a dropzone with the same ddgroup
onDragEnter : function(evtObj, targetElId) {
// Colorize the drag target if the drag node's parent is not the same as the drop target
if (targetElId != this.el.dom.parentNode.id) {
this.el.addClass('dropOK');
}
else {
// Remove the invitation
this.onDragOut();
}
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut : function(evtObj, targetElId) {
this.el.removeClass('dropOK');
},
//Called when mousedown for a specific amount of time
b4StartDrag : function() {
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//this.el.highlight();
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup
onInvalidDrop : function() {
this.invalidDrop = true;

},
endDrag : function() {
if (this.invalidDrop === true) {
this.el.removeClass('dropOK');

var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
this.el.dom.style.position = '';
}
};
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}

},
// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, targetElId) {
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(targetElId);

// Perform the node move only if the drag element's parent is not the same as the drop target
if (this.el.dom.parentNode.id != targetElId) {

// Move the element
dropEl.appendChild(this.el);

// Remove the drag invitation
this.onDragOut(evtObj, targetElId);

// Clear the styles
this.el.dom.style.position ='';
this.el.dom.style.top = '';
this.el.dom.style.left = '';
}
else {
// This was an invalid drop, lets call onInvalidDrop to initiate a repair
this.onInvalidDrop();
}
},
startDrag: function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({'position':'absolute','border':''});
dragEl.update(el.dom.innerHTML);
//dragEl.addClass(el.dom.className + ' dd-proxy');
}
};

var imgElements = Ext.get('logocontainer').select('img');
Ext.each(imgElements.elements, function(el) {
var dd = new Ext.dd.DD(el, 'imgsDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);
});

var test = new Ext.dd.DDTarget('west', 'imgsDDGroup');
(This is the javascript from the app, taken from: http://pol-dev.be/maillots2/_js/components.js )


I tried to change, position absolute or relative, it doesn't change.
I also tried to include it in the image tag, but no change too.

I'm looking through the forum for something similar, but got nothing :( Am I the only one to have that problem ?!

The Transporter
29 Oct 2009, 1:05 PM
Ah by the way Jay,

I've followed your tutorial to do it: http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

No clue on where the problem is ?

Thx

The Transporter
29 Oct 2009, 1:54 PM
aw1zard2 is trying to help me in private, he asked me to publish the whole JS script... Here it is:


if (Ext.version == "3.0") {
Ext.override(Ext.Element, {
getColor: function(attr, defaultValue, prefix){
var v = this.getStyle(attr), color = typeof prefix == "undefined" ? "#" : prefix, h;
if (!v || /transparent|inherit/.test(v)) {
return defaultValue;
}
if (/^r/.test(v)) {
Ext.each(v.slice(4, v.length - 1).split(','), function(s){
h = parseInt(s, 10);
color += (h < 16 ? '0' : '') + h.toString(16);
});
} else {
v = v.replace('#', '');
color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
}
return (color.length > 5 ? color.toLowerCase() : defaultValue);
}
});
}


Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var pbar1 = new Ext.ProgressBar({
text: 'Initializing...',
renderTo: "pbar",
animate: true
});

pbar1.wait({
interval: 500,
duration: 1,
increment: 11,
text: 'Loading app...',
scope: this,
fn: function () {
Ext.get('loading').remove();
Ext.fly('loading-mask').fadeOut({
remove: true
});
}
});

var south = new Ext.Panel({
region: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
});

var west = new Ext.Panel({
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 164,
minSize: 164,
maxSize: 164,
collapsible: false,
margins: '0 0 0 5',
contentEl: 'west'
});

var onSelect = function(){
//console.log(detailsForm.getForm().getValues(false));
detailsForm.form.submit({
url: 'index.php',
method: 'POST',
params: {'action':'updatecolor'},
waitMsg: 'Saving Data...',
success: function(form, action){
//alert(action.result.data);
//Ext.get('image').src = action.result.data;
Ext.get('image').set({src: action.result.data});
//document.getElementById('image').src = action.result.data;
Ext.getCmp('west-panel').doLayout();
//Ext.MessageBox.alert('Message', 'Plan saved.');
},
failure: function(form, action){
Ext.MessageBox.alert('Message', 'Save failed');
}
});
}


var detailsForm = new Ext.form.FormPanel({
id: 'detailsForm',
frame: true,
labelAlign: 'left',
labelWidth: 85,
waitMsgTarget: true,
forceLayout: true,
deferredRender: false,
items: [
new Ext.form.FieldSet({
title: 'Colors details',
autoHeight: true,
items: [{
fieldLabel: 'Maillot',
xtype: 'colorpickerfield',
name: 'colorfield[0]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Col',
xtype: 'colorpickerfield',
name: 'colorfield[1]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Col2',
xtype: 'colorpickerfield',
name: 'colorfield[2]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Lignes Sup',
xtype: 'colorpickerfield',
name: 'colorfield[3]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Bandes Sup',
xtype: 'colorpickerfield',
name: 'colorfield[4]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Numéro Sup',
xtype: 'colorpickerfield',
name: 'colorfield[5]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Ecriture Sup',
xtype: 'colorpickerfield',
name: 'colorfield[6]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Bande Inf',
xtype: 'colorpickerfield',
name: 'colorfield[7]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Lignes Inf',
xtype: 'colorpickerfield',
name: 'colorfield[8]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Numéro Inf',
xtype: 'colorpickerfield',
name: 'colorfield[9]',
listeners: {
select: onSelect
}
}]
})]
});

var center = new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
title: 'Control Panel',
items: [{
title: 'Colors',
autoScroll: true,
items: [detailsForm]
},{
title: 'Logos',
contentEl: 'logocontainer',
autoScroll: true
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [west,south,center]
});

var overrides = {
// Only called when element is dragged over the a dropzone with the same ddgroup
onDragEnter : function(evtObj, targetElId) {
// Colorize the drag target if the drag node's parent is not the same as the drop target
if (targetElId != this.el.dom.parentNode.id) {
this.el.addClass('dropOK');
}
else {
// Remove the invitation
this.onDragOut();
}
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut : function(evtObj, targetElId) {
this.el.removeClass('dropOK');
},
//Called when mousedown for a specific amount of time
b4StartDrag : function() {
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//this.el.highlight();
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup
onInvalidDrop : function() {
this.invalidDrop = true;

},
endDrag : function() {
if (this.invalidDrop === true) {
this.el.removeClass('dropOK');

var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
this.el.dom.style.position = '';
}
};
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}

},
// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, targetElId) {
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(targetElId);

// Perform the node move only if the drag element's parent is not the same as the drop target
if (this.el.dom.parentNode.id != targetElId) {

// Move the element
dropEl.appendChild(this.el);

// Remove the drag invitation
this.onDragOut(evtObj, targetElId);

// Clear the styles
this.el.dom.style.position ='';
this.el.dom.style.top = '';
this.el.dom.style.left = '';
}
else {
// This was an invalid drop, lets call onInvalidDrop to initiate a repair
this.onInvalidDrop();
}
},
startDrag: function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({'position':'absolute','z-index':'100100'});
dragEl.update(el.dom.innerHTML);
//dragEl.addClass(el.dom.className + ' dd-proxy');
}
};

var imgElements = Ext.get('logocontainer').select('div');
Ext.each(imgElements.elements, function(el) {
var dd = new Ext.dd.DD(el, 'imgsDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);
});

var test = new Ext.dd.DDTarget('west', 'imgsDDGroup');


});

The Transporter
29 Oct 2009, 1:57 PM
aw1zard2 is trying to help me in private, he asked me to publish the whole JS script... Here it is:

I don't know if this post is a duplicate but I cannot see my previous one!


if (Ext.version == "3.0") {
Ext.override(Ext.Element, {
getColor: function(attr, defaultValue, prefix){
var v = this.getStyle(attr), color = typeof prefix == "undefined" ? "#" : prefix, h;
if (!v || /transparent|inherit/.test(v)) {
return defaultValue;
}
if (/^r/.test(v)) {
Ext.each(v.slice(4, v.length - 1).split(','), function(s){
h = parseInt(s, 10);
color += (h < 16 ? '0' : '') + h.toString(16);
});
} else {
v = v.replace('#', '');
color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
}
return (color.length > 5 ? color.toLowerCase() : defaultValue);
}
});
}


Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var pbar1 = new Ext.ProgressBar({
text: 'Initializing...',
renderTo: "pbar",
animate: true
});

pbar1.wait({
interval: 500,
duration: 1,
increment: 11,
text: 'Loading app...',
scope: this,
fn: function () {
Ext.get('loading').remove();
Ext.fly('loading-mask').fadeOut({
remove: true
});
}
});

var south = new Ext.Panel({
region: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
});

var west = new Ext.Panel({
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 164,
minSize: 164,
maxSize: 164,
collapsible: false,
margins: '0 0 0 5',
contentEl: 'west'
});

var onSelect = function(){
//console.log(detailsForm.getForm().getValues(false));
detailsForm.form.submit({
url: 'index.php',
method: 'POST',
params: {'action':'updatecolor'},
waitMsg: 'Saving Data...',
success: function(form, action){
//alert(action.result.data);
//Ext.get('image').src = action.result.data;
Ext.get('image').set({src: action.result.data});
//document.getElementById('image').src = action.result.data;
Ext.getCmp('west-panel').doLayout();
//Ext.MessageBox.alert('Message', 'Plan saved.');
},
failure: function(form, action){
Ext.MessageBox.alert('Message', 'Save failed');
}
});
}


var detailsForm = new Ext.form.FormPanel({
id: 'detailsForm',
frame: true,
labelAlign: 'left',
labelWidth: 85,
waitMsgTarget: true,
forceLayout: true,
deferredRender: false,
items: [
new Ext.form.FieldSet({
title: 'Colors details',
autoHeight: true,
items: [{
fieldLabel: 'Maillot',
xtype: 'colorpickerfield',
name: 'colorfield[0]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Col',
xtype: 'colorpickerfield',
name: 'colorfield[1]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Col2',
xtype: 'colorpickerfield',
name: 'colorfield[2]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Lignes Sup',
xtype: 'colorpickerfield',
name: 'colorfield[3]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Bandes Sup',
xtype: 'colorpickerfield',
name: 'colorfield[4]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Numéro Sup',
xtype: 'colorpickerfield',
name: 'colorfield[5]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Ecriture Sup',
xtype: 'colorpickerfield',
name: 'colorfield[6]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Bande Inf',
xtype: 'colorpickerfield',
name: 'colorfield[7]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Lignes Inf',
xtype: 'colorpickerfield',
name: 'colorfield[8]',
listeners: {
select: onSelect
}
},
{
fieldLabel: 'Numéro Inf',
xtype: 'colorpickerfield',
name: 'colorfield[9]',
listeners: {
select: onSelect
}
}]
})]
});

var center = new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
title: 'Control Panel',
items: [{
title: 'Colors',
autoScroll: true,
items: [detailsForm]
},{
title: 'Logos',
contentEl: 'logocontainer',
autoScroll: true
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [west,south,center]
});

var overrides = {
// Only called when element is dragged over the a dropzone with the same ddgroup
onDragEnter : function(evtObj, targetElId) {
// Colorize the drag target if the drag node's parent is not the same as the drop target
if (targetElId != this.el.dom.parentNode.id) {
this.el.addClass('dropOK');
}
else {
// Remove the invitation
this.onDragOut();
}
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut : function(evtObj, targetElId) {
this.el.removeClass('dropOK');
},
//Called when mousedown for a specific amount of time
b4StartDrag : function() {
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//this.el.highlight();
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup
onInvalidDrop : function() {
this.invalidDrop = true;

},
endDrag : function() {
if (this.invalidDrop === true) {
this.el.removeClass('dropOK');

var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
this.el.dom.style.position = '';
}
};
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}

},
// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, targetElId) {
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(targetElId);

// Perform the node move only if the drag element's parent is not the same as the drop target
if (this.el.dom.parentNode.id != targetElId) {

// Move the element
dropEl.appendChild(this.el);

// Remove the drag invitation
this.onDragOut(evtObj, targetElId);

// Clear the styles
this.el.dom.style.position ='';
this.el.dom.style.top = '';
this.el.dom.style.left = '';
}
else {
// This was an invalid drop, lets call onInvalidDrop to initiate a repair
this.onInvalidDrop();
}
},
startDrag: function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({'position':'absolute','z-index':'100100'});
dragEl.update(el.dom.innerHTML);
//dragEl.addClass(el.dom.className + ' dd-proxy');
}
};

var imgElements = Ext.get('logocontainer').select('div');
Ext.each(imgElements.elements, function(el) {
var dd = new Ext.dd.DD(el, 'imgsDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);
});

var test = new Ext.dd.DDTarget('west', 'imgsDDGroup');


});

aw1zard2
29 Oct 2009, 8:17 PM
Good News I got it working doing the drag over another image. :)

I used JGracia's Drag n drop example and worked off of that.

I zipped up the code so you can see it.

The one pic should be set as a background-image to the one named div in the west region instead of using the <img> tags.

I didn't try it in the border layout with different regions this is a single panel inside a window.
And I added some extra css to this example.

So take a look and let me know if you have any problems or questions.

:)

The Transporter
2 Nov 2009, 1:26 AM
Thanks for your files dude, it works pretty good indead.

I still don't understand why it doesn't work with mine.

I tried everything (almost!) and I still have the problem.

If Jay or you have new ideas to fix the problem, I'm open !

Thanks :)

jay@moduscreate.com
2 Nov 2009, 6:52 AM
I see that the position is still relative.

I don't mean to be a salesman, but all of this is explained in great detail in my book, which is just about complete.

you can get the ebook for as little as $17.35 USD using the coupon code "Ajaxian35" at http://manning.com/garcia

I have examples on how to also use proxies in the DOM with drag and drop.

aw1zard2
2 Nov 2009, 8:19 AM
His book is really good I have a copy of it and it helped me with some of the evil things I was doing.

Now I just slap my hand when I do it that is if I catch myself.

Ive actually got 3 books about EXT-JS. Each one has good info about using the library.

Learning Ext-JS.
Ext-JS in Action.
Ext-JS 3.0 Cookbook.

http://www.extjs.com/learn/Books (http://www.extjs.com/forum/../learn/Books)
:)
And I'm excited about JGarcia's charts chapter being ready this week or next it's one of the chapters I've been waiting for. Congrats J.

jay@moduscreate.com
2 Nov 2009, 8:26 AM
Thanks for the feedback dude. :)