On 4/6/10 3:04 AM, Christian Schmidt wrote: > Hi Greg, > > could you please send me a code snippet to reproduce this behavior? > Hi Chris,
I took this example: http://demo.qooxdoo.org/current/demobrowser/#data~ExtendedList.html and combined it with this one: http://demo.qooxdoo.org/current/demobrowser/#ui~DragDrop.html As I am quite inexperienced with qooxdoo, I cannot successfully create a model, but the code below works if you can get the dang thing to recognize the model. My actual code is simply pulling from a json source. You'll see that clicking on a checkbox does not allow dragging it around. The only way I fixed it was by extending the CheckBox class and overriding the _onMouseDown and _onMouseUp so that they don't call e.stopPropagation(). Remove this, and drag/drop works like a charm. Greg /* ************************************************************************ qooxdoo - the new era of web development http://qooxdoo.org Copyright: 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de License: LGPL: http://www.gnu.org/licenses/lgpl.html EPL: http://www.eclipse.org/org/documents/epl-v10.php See the LICENSE file in the project's top-level directory for details. Authors: * Sebastian Werner (wpbasti) * Fabian Jakobs (fjakobs) ************************************************************************ */ /* ************************************************************************ #asset(qx/icon/${qx.icontheme}/16/places/folder.png) ************************************************************************ */ /** * @tag showcase */ qx.Class.define("demobrowser.demo.ui.DragDrop", { extend : qx.application.Standalone, members : { __list : null, __currentListItem : null, main: function() { this.base(arguments); var root = this.getRoot(); var model = qx.data.marshal.Json.createModel("{\"data\":[{\"id\":2,\"pressdate\":\"Fri Apr 02 2010\",\"headline\":\"New Item 3\",\"subtitle\":\"\",\"author\":\"\",\"body\":\"\",\"excerpt\":\"\",\"publink\":\"\",\"publication\":\"\",\"listorder\":0,\"ispublic\":\"\",\"desc\":\" New Item 3\"},{\"id\":4,\"pressdate\":\"Fri Apr 02 2010\",\"headline\":\"New Item\",\"subtitle\":\"\",\"author\":\"\",\"body\":\"\",\"excerpt\":\"\",\"publink\":\"\",\"publication\":\"\",\"listorder\":0,\"ispublic\":\"\",\"desc\":\" New Item\"},{\"id\":1,\"pressdate\":\"Fri Apr 02 2010\",\"headline\":\"New Item 2\",\"subtitle\":\"\",\"author\":\"\",\"body\":\"\",\"excerpt\":\"\",\"publink\":\"\",\"publication\":\"\",\"listorder\":1,\"ispublic\":1,\"desc\":\" New Item 2\"},{\"id\":3,\"pressdate\":\"Fri Apr 02 2010\",\"headline\":\"New Item 4\",\"subtitle\":\"\",\"author\":\"\",\"body\":\"\",\"excerpt\":\"\",\"publink\":\"\",\"publication\":\"\",\"listorder\":1,\"ispublic\":1,\"desc\":\" New Item 4\"},{\"id\":5,\"pressdate\":\"Sun Apr 04 2010\",\"headline\":\"Body test\",\"subtitle\":\"fdas\",\"author\":\"fda\",\"body\":\"<strong>test<\/strong>\",\"excerpt\":\"\",\"publink\":\"fdsa\",\"publication\":\"fdsa\",\"listorder\":\"\",\"ispublic\":1,\"desc\":\" Body test\"}]}"); // **************************************************************** var scroller = new qx.ui.container.Scroll(); var box = new qx.ui.layout.Basic(); var container = new qx.ui.container.Composite(box).set({ allowStretchY : false, allowStretchX : false }); scroller.add(container); root.add(scroller, {edge : 0}); // **************************************************************** var labelBoth = new qx.ui.basic.Label("Reorderable"); container.add(labelBoth, { left : 500, top: 20 }); var both = this.__list = new qx.ui.form.List; var controller = new qx.data.controller.List(null, both); controller.setModel(model); var delegate = { configureItem : function(item) { item.setPadding(3); }, createItem : function() { var item = new qx.ui.form.CheckBox(); return item; }, bindItem : function(controller, item, id) { controller.bindProperty("headline", "label", null, item, id); controller.bindProperty("ispublic", "value", {converter: function(data) { if (data == null) { return null; } return Boolean(data); }}, item, id); controller.bindPropertyReverse("ispublic", "value", null, item, id); } }; controller.setDelegate(delegate); both.setDraggable(true); both.setDroppable(true); both.setSelectionMode("multi"); container.add(both, { left : 500, top : 40 }); // Create drag indicator var indicator = new qx.ui.core.Widget; indicator.setDecorator(new qx.ui.decoration.Single().set({ top : [ 1, "solid", "#33508D" ] })); indicator.setHeight(0); indicator.setOpacity(0.5); indicator.setZIndex(100); indicator.setLayoutProperties({left: -1000, top: -1000}); indicator.setDroppable(true); this.getRoot().add(indicator); // Just add a move action both.addListener("dragstart", function(e) { e.addAction("move"); }); both.addListener("dragend", function(e) { // Move indicator away indicator.setDomPosition(-1000, -1000); }); both.addListener("drag", function(e) { var orig = e.getOriginalTarget(); // store the current listitem - if the user drops on the indicator // we can use this item instead of calculating the position of the // indicator if (orig instanceof qx.ui.form.CheckBox) { qx.core.Init.getApplication().__currentListItem = orig; } if (!qx.ui.core.Widget.contains(this, orig) && orig != indicator) { return; } var origCoords = orig.getContainerLocation(); indicator.setWidth(orig.getBounds().width); indicator.setDomPosition(origCoords.left, origCoords.top); }); both.addListener("dragover", function(e) { // Stop when the dragging comes from outside if (e.getRelatedTarget()) { e.preventDefault(); } }); both.addListener("drop", function(e) { this.__reorderList(e.getOriginalTarget()); }, this); indicator.addListener("drop", function(e) { this.__reorderList(this.__currentListItem); }, this); }, __reorderList : function(listItem) { // Only continue if the target is a list item. if (listItem.classname != "qx.ui.form.ListItem") { return ; } var sel = this.__list.getSortedSelection(); for (var i=0, l=sel.length; i<l; i++) { this.__list.addBefore(sel[i], listItem); // recover selection as it get lost during child move this.__list.addToSelection(sel[i]); } } }, /* ***************************************************************************** DESTRUCT ***************************************************************************** */ destruct : function() { this._disposeObjects("__list"); } }); ------------------------------------------------------------------------------ Download Intel® Parallel Studio Eval Try the new software tools for yourself. Speed compiling, find bugs proactively, and fine-tune applications for parallel performance. See why Intel Parallel Studio got high marks during beta. http://p.sf.net/sfu/intel-sw-dev _______________________________________________ qooxdoo-devel mailing list qooxdoo-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
