Tinyurl is not working with my code example, so feel free to copy it from this
email:
qx.Class.define("Modal", {
extend : qx.ui.window.Window,
construct : function(image, targetWidget)
{
this.base(arguments, "Confirm");
this.set({
modal : true,
layout : new qx.ui.layout.Canvas()
});
this.open();
this._image = image;
this._targetWidget = targetWidget;
this.add(new qx.ui.basic.Label("would you like to move the image?"), {left
: 10, top : 10});
var yes = new qx.ui.form.Button("Yes");
var no = new qx.ui.form.Button("No");
this.add(yes, {top : 50, left : 10});
this.add(no, {top : 50, left : 110});
yes.addListener("execute", this._onYesExecuted, this);
no.addListener("execute", this.close, this);
},
members :
{
_image: null,
_targetWidget : null,
_onYesExecuted : function()
{
this._targetWidget.add(this._image);
this.close();
this.destroy();
}
},
destruct : function()
{
this._targetWidget = this._image = null;
}
});
qx.Class.define("dd.Application", {
extend : qx.application.Standalone,
members : {
main : function() {
this.base(arguments);
if (qx.core.Environment.get("qx.debug")) {
qx.log.appender.Native;
qx.log.appender.Console;
}
var doc = this.getRoot();
var pane = new qx.ui.container.Composite( new qx.ui.layout.VBox());
doc.add( pane, {width: "100%", height: "100%"});
var box1 = new qx.ui.container.Composite( new qx.ui.layout.HBox()).set({
width : 100,
height : 100,
decorator : "main"
});
pane.add( box1);
var box2 = new qx.ui.container.Composite( new qx.ui.layout.HBox()).set({
width : 100,
height : 100,
decorator : "main"
});
pane.add( box2);
box2.setDroppable( true);
var img1 = new
qx.ui.basic.Image("qx/icon/Tango/32/status/dialog-warning.png").set({
width : 100,
height : 100,
scale : true,
allowGrowX : false,
allowGrowY : false
});
img1.getContentElement().setAttribute("draggable", "false");
img1.setDraggable( true);
box1.add( img1);
var img2 = new
qx.ui.basic.Image("qx/icon/Tango/32/status/dialog-warning.png").set({
width : 100,
height : 100,
scale : false,
allowGrowX : false,
allowGrowY : false
});
img2.setDraggable( true);
box1.add( img2);
img1.addListener( "dragstart", function(e) {
qx.log.Logger.debug( "dragstart");
e.addAction("move");
e.addType("image");
}, this);
img2.addListener( "dragstart", function(e) {
qx.log.Logger.debug( "dragstart");
e.addAction("move");
e.addType("image");
}, this);
box2.addListener( "dragover", function(e) {
qx.log.Logger.debug( "dragover");
if (!e.supportsType("image")) {
qx.log.Logger.debug( this, 'source is not an image : prevent');
e.preventDefault();
}
}, this);
box2.addListener( "drop", function(e) {
qx.log.Logger.debug( "drop");
if (!e.supportsType("image")) {
qx.log.Logger.debug( this, 'source is not an image : prevent');
e.preventDefault();
return
}
new Modal(e.getDragTarget(), box2);
}, this);
}
}
});
Gruß
Mustafa Sak
Applications & Integration
1&1 Internet AG | Ernst-Frey-Straße 10 | 76135 Karlsruhe | Germany
Von: Cyrille Rigault [mailto:cyrilleriga...@gmail.com]
Gesendet: Dienstag, 12. Mai 2015 13:52
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] drag & drop for an image does not work with IE
Hello Mustafa,
Thanks a lot for how to circumvent the issue, it works perfectly. I report the
bug #9136.
I have another question around drag&drop:
I would like to make a drag&drop with a modal dialog box in the "drop" listener
method, so that the drop takes place if the user agrees.
The problem is that the "drop" listener terminates (and returns nothing) while
the modal waits for a user response.
The "dragend" listener is also called, meaning the drag&drop is finished.
How can I solve this issue ?
Thank you
Cyrille
On Tue, May 12, 2015 at 11:11 AM, Mustafa Sak
<mustafa....@1und1.de<mailto:mustafa....@1und1.de>> wrote:
Hi,
would you please report a bug for this issue?
But for the mean time you could bootstrap by setting an attribute to the image
DOM element:
Img.getContentElement().setAttribute(“draggable”, “false”);
Gruß
Mustafa Sak
Applications & Integration
1&1 Internet AG | Ernst-Frey-Straße 10 | 76135 Karlsruhe | Germany
Von: Cyrille Rigault
[mailto:cyrilleriga...@gmail.com<mailto:cyrilleriga...@gmail.com>]
Gesendet: Dienstag, 12. Mai 2015 10:31
An: qooxdoo Development
Betreff: [qooxdoo-devel] drag & drop for an image does not work with IE
Hello,
I sent this some days ago but I've had no reply since.
Meantime, I was able to bring some details:
I'm trying a drag&drop of an image in IE 10, qooxdoo 4.0.1, and the drop target
is never activated. I think this is due that IE creates a shallow copy of the
image in the dragging operation.
In fact, it works with an Image with property "scale=false" rendered as a
<div>, but not with an Image with property "scale=true" rendered as an <img>.
How can I solve that ?
here is a sample code.
Regards
Cyrille
-------------
/**
* @asset(dd/*)
* @asset(qx/icon/Tango/32/status/dialog-warning.png)
*/
qx.Class.define("dd.Application", {
extend : qx.application.Standalone,
members : {
main : function() {
this.base(arguments);
if (qx.core.Environment.get("qx.debug")) {
qx.log.appender.Native;
qx.log.appender.Console;
}
var doc = this.getRoot();
var pane = new qx.ui.container.Composite( new qx.ui.layout.VBox());
doc.add( pane, {width: "100%", height: "100%"});
var box1 = new qx.ui.container.Composite( new qx.ui.layout.HBox()).set({
width : 100,
height : 100,
decorator : "main"
});
pane.add( box1);
var box2 = new qx.ui.container.Composite( new qx.ui.layout.HBox()).set({
width : 100,
height : 100,
decorator : "main"
});
pane.add( box2);
box2.setDroppable( true);
var img1 = new
qx.ui.basic.Image("qx/icon/Tango/32/status/dialog-warning.png").set({
width : 100,
height : 100,
scale : true,
allowGrowX : false,
allowGrowY : false
});
img1.setDraggable( true);
box1.add( img1);
var img2 = new
qx.ui.basic.Image("qx/icon/Tango/32/status/dialog-warning.png").set({
width : 100,
height : 100,
scale : false,
allowGrowX : false,
allowGrowY : false
});
img2.setDraggable( true);
box1.add( img2);
img1.addListener( "dragstart", function(e) {
qx.log.Logger.debug( "dragstart");
e.addAction("move");
e.addType("image");
}, this);
img2.addListener( "dragstart", function(e) {
qx.log.Logger.debug( "dragstart");
e.addAction("move");
e.addType("image");
}, this);
box2.addListener( "dragover", function(e) {
qx.log.Logger.debug( "dragover");
if (!e.supportsType("image")) {
qx.log.Logger.debug( this, 'source is not an image : prevent');
e.preventDefault();
}
}, this);
}
}
});
------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net<mailto:qooxdoo-devel@lists.sourceforge.net>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
