-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
+ position: relative;
+}
+[draggable=true] {
+ -khtml-user-drag: element;
+ -webkit-user-drag: element;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+}
+.v-ie .v-ddwrapper a.drag-start {
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ /* Some color needed to make it draggable */
+ background-color:cyan;
+ filter: alpha(opacity=0);
}
.v-ddwrapper-over {
border: 2px solid #1d9dff;
<module>
- <!-- This GWT module defines the Vaadin DefaultWidgetSet. This is the module
- you want to extend when creating an extended widget set, or when creating
+ <!-- This GWT module defines the Vaadin DefaultWidgetSet. This is the module
+ you want to extend when creating an extended widget set, or when creating
a specialized widget set with a subset of the components. -->
<!-- Hint for WidgetSetBuilder not to automatically update the file -->
<source path="client" />
- <!-- Use own Scheduler implementation to be able to track if commands are
+ <!-- Use own Scheduler implementation to be able to track if commands are
running -->
<replace-with class="com.vaadin.terminal.gwt.client.VSchedulerImpl">
<when-type-is class="com.google.gwt.core.client.impl.SchedulerImpl" />
</any>
</replace-with>
+ <replace-with
+ class="com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapperIE">
+ <when-type-is
+ class="com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper" />
+ <any>
+ <when-property-is name="user.agent" value="ie6" />
+ <when-property-is name="user.agent" value="ie8" />
+ </any>
+ </replace-with>
+
<!-- Workaround for #6682. Remove when fixed in GWT. -->
<replace-with class="com.google.gwt.dom.client.VaadinDOMImplSafari">
<when-type-is class="com.google.gwt.dom.client.DOMImpl" />
import com.google.gwt.xhr.client.ReadyStateChangeHandler;
import com.google.gwt.xhr.client.XMLHttpRequest;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
-import com.vaadin.terminal.gwt.client.BrowserInfo;
import com.vaadin.terminal.gwt.client.MouseEventDetails;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.RenderInformation;
import com.vaadin.terminal.gwt.client.RenderInformation.Size;
import com.vaadin.terminal.gwt.client.UIDL;
import com.vaadin.terminal.gwt.client.Util;
+import com.vaadin.terminal.gwt.client.VConsole;
import com.vaadin.terminal.gwt.client.VTooltip;
+import com.vaadin.terminal.gwt.client.ValueMap;
import com.vaadin.terminal.gwt.client.ui.dd.DDUtil;
import com.vaadin.terminal.gwt.client.ui.dd.HorizontalDropLocation;
import com.vaadin.terminal.gwt.client.ui.dd.VAbstractDropHandler;
*/
public class VDragAndDropWrapper extends VCustomComponent implements
VHasDropHandler {
+ public static final String DRAG_START_MODE = "dragStartMode";
+ public static final String HTML5_DATA_FLAVORS = "html5-data-flavors";
private static final String CLASSNAME = "v-ddwrapper";
+ protected static final String DRAGGABLE = "draggable";
public VDragAndDropWrapper() {
super();
}
}
}, TouchStartEvent.getType());
+
sinkEvents(Event.TOUCHEVENTS);
}
* @return true if the event was handled as a drag start event
*/
private boolean startDrag(NativeEvent event) {
- if (dragStarMode > 0) {
+ if (dragStartMode == WRAPPER || dragStartMode == COMPONENT) {
VTransferable transferable = new VTransferable();
transferable.setDragSource(VDragAndDropWrapper.this);
transferable.setData("mouseDown",
new MouseEventDetails(event).serialize());
- if (dragStarMode == WRAPPER) {
+ if (dragStartMode == WRAPPER) {
dragEvent.createDragImage(getElement(), true);
} else {
dragEvent.createDragImage(((Widget) paintable).getElement(),
return false;
}
+ protected final static int NONE = 0;
+ protected final static int COMPONENT = 1;
+ protected final static int WRAPPER = 2;
+ protected final static int HTML5 = 3;
+
+ protected int dragStartMode;
+
private ApplicationConnection client;
private VAbstractDropHandler dropHandler;
private VDragEvent vaadinDragEvent;
- private final static int NONE = 0;
- private final static int COMPONENT = 1;
- private final static int WRAPPER = 2;
- private int dragStarMode;
private int filecounter = 0;
private Map<String, String> fileIdToReceiver;
+ private ValueMap html5DataFlavors;
+ private Element dragStartElement;
@Override
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
}
startNextUpload();
- dragStarMode = uidl.getIntAttribute("dragStartMode");
+ dragStartMode = uidl.getIntAttribute(DRAG_START_MODE);
+ initDragStartMode();
+ html5DataFlavors = uidl.getMapAttribute(HTML5_DATA_FLAVORS);
+ }
+ }
+
+ protected void initDragStartMode() {
+ Element div = getElement();
+ if (dragStartMode == HTML5) {
+ if (dragStartElement == null) {
+ dragStartElement = getDragStartElement();
+ dragStartElement.setPropertyBoolean(DRAGGABLE, true);
+ VConsole.log("draggable = "
+ + dragStartElement.getPropertyBoolean(DRAGGABLE));
+ hookHtml5DragStart(dragStartElement);
+ VConsole.log("drag start listeners hooked.");
+ }
+ } else {
+ dragStartElement = null;
+ if (div.hasAttribute(DRAGGABLE)) {
+ div.removeAttribute(DRAGGABLE);
+ }
}
}
+ protected Element getDragStartElement() {
+ return getElement();
+ }
+
private boolean uploading;
private ReadyStateChangeHandler readyStateChangeHandler = new ReadyStateChangeHandler() {
}
+ public boolean html5DragStart(VHtml5DragEvent event) {
+ if (dragStartMode == HTML5) {
+ /*
+ * Populate html5 payload with dataflavors from the serverside
+ */
+ JsArrayString flavors = html5DataFlavors.getKeyArray();
+ for (int i = 0; i < flavors.length(); i++) {
+ String flavor = flavors.get(i);
+ event.setHtml5DataFlavor(flavor,
+ html5DataFlavors.getString(flavor));
+ }
+ event.setEffectAllowed("copy");
+ return true;
+ }
+ return false;
+ }
+
public boolean html5DragEnter(VHtml5DragEvent event) {
if (dropHandler == null) {
return true;
VDragAndDropManager.get().setCurrentDropHandler(
getDropHandler());
}
- event.preventDefault();
- event.stopPropagation();
+ try {
+ event.preventDefault();
+ event.stopPropagation();
+ } catch (Exception e) {
+ // VConsole.log("IE9 fails");
+ }
return false;
} catch (Exception e) {
GWT.getUncaughtExceptionHandler().onUncaughtException(e);
}
};
dragleavetimer.schedule(350);
- event.preventDefault();
- event.stopPropagation();
+ try {
+ event.preventDefault();
+ event.stopPropagation();
+ } catch (Exception e) {
+ // VConsole.log("IE9 fails");
+ }
return false;
} catch (Exception e) {
GWT.getUncaughtExceptionHandler().onUncaughtException(e);
vaadinDragEvent.setCurrentGwtEvent(event);
getDropHandler().dragOver(vaadinDragEvent);
- // needed to be set for Safari, otherwise drop will not happen
- if (BrowserInfo.get().isWebkit()) {
- String s = event.getEffectAllowed();
- if ("all".equals(s) || s.contains("opy")) {
- event.setDragEffect("copy");
- } else {
- event.setDragEffect(s);
- }
+
+ String s = event.getEffectAllowed();
+ if ("all".equals(s) || s.contains("opy")) {
+ event.setDropEffect("copy");
+ } else {
+ event.setDropEffect(s);
+ }
+
+ try {
+ event.preventDefault();
+ event.stopPropagation();
+ } catch (Exception e) {
+ // VConsole.log("IE9 fails");
}
- event.preventDefault();
- event.stopPropagation();
return false;
}
VDragAndDropManager.get().endDrag();
vaadinDragEvent = null;
- event.preventDefault();
- event.stopPropagation();
-
+ try {
+ event.preventDefault();
+ event.stopPropagation();
+ } catch (Exception e) {
+ // VConsole.log("IE9 fails");
+ }
return false;
} catch (Exception e) {
GWT.getUncaughtExceptionHandler().onUncaughtException(e);
}
+ protected native void hookHtml5DragStart(Element el)
+ /*-{
+ var me = this;
+ el.addEventListener("dragstart", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragStart(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ }, false);
+ }-*/;
+
/**
* Prototype code, memory leak risk.
*
* @param el
*/
- private native void hookHtml5Events(Element el)
+ protected native void hookHtml5Events(Element el)
/*-{
-
var me = this;
-
- if(el.addEventListener) {
- el.addEventListener("dragenter", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragEnter(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- }, false);
-
- el.addEventListener("dragleave", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragLeave(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- }, false);
-
- el.addEventListener("dragover", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragOver(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- }, false);
-
- el.addEventListener("drop", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragDrop(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- }, false);
-
- } else {
- el.attachEvent("ondragenter", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragEnter(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- });
-
- el.attachEvent("ondragleave", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragLeave(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- });
-
- el.attachEvent("ondragover", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragOver(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- });
-
- el.attachEvent("ondrop", function(ev) {
- return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragDrop(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
- });
- }
-
+
+ el.addEventListener("dragenter", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragEnter(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ }, false);
+
+ el.addEventListener("dragleave", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragLeave(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ }, false);
+
+ el.addEventListener("dragover", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragOver(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ }, false);
+
+ el.addEventListener("drop", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragDrop(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ }, false);
}-*/;
public boolean updateDropDetails(VDragEvent drag) {
--- /dev/null
+package com.vaadin.terminal.gwt.client.ui;
+
+import com.google.gwt.dom.client.AnchorElement;
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.user.client.Element;
+import com.vaadin.terminal.gwt.client.VConsole;
+
+public class VDragAndDropWrapperIE extends VDragAndDropWrapper {
+ private AnchorElement anchor = null;
+
+ @Override
+ protected Element getDragStartElement() {
+ VConsole.log("IE get drag start element...");
+ Element div = getElement();
+ if (dragStartMode == HTML5) {
+ if (anchor == null) {
+ anchor = Document.get().createAnchorElement();
+ anchor.setHref("#");
+ anchor.setClassName("drag-start");
+ div.appendChild(anchor);
+ }
+ VConsole.log("IE get drag start element...");
+ return (Element) anchor.cast();
+ } else {
+ if (anchor != null) {
+ div.removeChild(anchor);
+ anchor = null;
+ }
+ return div;
+ }
+ }
+
+ @Override
+ protected native void hookHtml5DragStart(Element el)
+ /*-{
+ var me = this;
+
+ el.attachEvent("ondragstart", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragStart(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ });
+ }-*/;
+
+ @Override
+ protected native void hookHtml5Events(Element el)
+ /*-{
+ var me = this;
+
+ el.attachEvent("ondragenter", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragEnter(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ });
+
+ el.attachEvent("ondragleave", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragLeave(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ });
+
+ el.attachEvent("ondragover", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragOver(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ });
+
+ el.attachEvent("ondrop", function(ev) {
+ return me.@com.vaadin.terminal.gwt.client.ui.VDragAndDropWrapper::html5DragDrop(Lcom/vaadin/terminal/gwt/client/ui/dd/VHtml5DragEvent;)(ev);
+ });
+ }-*/;
+
+}
return null;
}-*/;
- public final native void setDragEffect(String effect)
+ /**
+ * @deprecated As of Vaadin 6.8, replaced by {@link #setDropEffect(String)}.
+ */
+ @Deprecated
+ public final void setDragEffect(String effect) {
+ setDropEffect(effect);
+ }
+
+ public final native void setDropEffect(String effect)
/*-{
try {
this.dataTransfer.dropEffect = effect;
return this.dataTransfer.effectAllowed;
}-*/;
+ public final native void setEffectAllowed(String effect)
+ /*-{
+ this.dataTransfer.effectAllowed = effect;
+ }-*/;
+
public final native int getFileCount()
/*-{
return this.dataTransfer.files ? this.dataTransfer.files.length : 0;
return this.dataTransfer.files[fileIndex];
}-*/;
+ public final native void setHtml5DataFlavor(String flavor, String data)
+ /*-{
+ this.dataTransfer.setData(flavor, data);
+ }-*/;
+
}
this.component = component;
}
- public Object getData(String dataFlawor) {
- return variables.get(dataFlawor);
+ public Object getData(String dataFlavor) {
+ return variables.get(dataFlavor);
}
- public void setData(String dataFlawor, Object value) {
- variables.put(dataFlawor, value);
+ public void setData(String dataFlavor, Object value) {
+ variables.put(dataFlavor, value);
}
public Collection<String> getDataFlavors() {
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Iterator;
+import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Map.Entry;
/**
* The component in wrapper that is being dragged or null if the
- * transferrable is not a component (most likely an html5 drag).
+ * transferable is not a component (most likely an html5 drag).
*
* @return
*/
}
/**
- * @return a detail about the drags horizontal position over the wrapper.
+ * @return a detail about the drags horizontal position over the
+ * wrapper.
*/
public HorizontalDropLocation getHorizontalDropLocation() {
return HorizontalDropLocation
/**
* The whole wrapper is used as a drag image when dragging.
*/
- WRAPPER
+ WRAPPER,
+ /**
+ * The whole wrapper is used to start an HTML5 drag.
+ *
+ * NOTE: In Internet Explorer 6 to 8, this prevents user interactions
+ * with the wrapper's contents. For example, clicking a button inside
+ * the wrapper will no longer work.
+ */
+ HTML5,
}
+ private final Map<String, Object> html5DataFlavors = new LinkedHashMap<String, Object>();
private DragStartMode dragStartMode = DragStartMode.NONE;
/**
super(root);
}
+ /**
+ * Sets data flavors available in the DragAndDropWrapper is used to start an
+ * HTML5 style drags. Most commonly the "Text" flavor should be set.
+ * Multiple data types can be set.
+ *
+ * @param type
+ * the string identifier of the drag "payload". E.g. "Text" or
+ * "text/html"
+ * @param value
+ * the value
+ */
+ public void setHTML5DataFlavor(String type, Object value) {
+ html5DataFlavors.put(type, value);
+ requestRepaint();
+ }
+
@Override
public void paintContent(PaintTarget target) throws PaintException {
super.paintContent(target);
- target.addAttribute("dragStartMode", dragStartMode.ordinal());
+ target.addAttribute(VDragAndDropWrapper.DRAG_START_MODE,
+ dragStartMode.ordinal());
if (getDropHandler() != null) {
getDropHandler().getAcceptCriterion().paint(target);
}
}
}
}
+ target.addAttribute(VDragAndDropWrapper.HTML5_DATA_FLAVORS,
+ html5DataFlavors);
}
private DropHandler dropHandler;
--- /dev/null
+package com.vaadin.tests.dd;
+
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.terminal.ClassResource;
+import com.vaadin.terminal.Sizeable;
+import com.vaadin.tests.components.TestBase;
+import com.vaadin.ui.DragAndDropWrapper;
+import com.vaadin.ui.DragAndDropWrapper.DragStartMode;
+import com.vaadin.ui.DragAndDropWrapper.WrapperTransferable;
+import com.vaadin.ui.Embedded;
+import com.vaadin.ui.Label;
+
+public class StartHtml5Drag extends TestBase {
+
+ @Override
+ protected void setup() {
+ DragAndDropWrapper dragStart = new DragAndDropWrapper(new Label(
+ "Drag me"));
+ dragStart.setDragStartMode(DragStartMode.HTML5);
+ dragStart.setHTML5DataFlavor("Text", "HTML5!");
+ addComponent(dragStart);
+
+ DragAndDropWrapper dropTarget = new DragAndDropWrapper(new Label(
+ "over here"));
+ dropTarget.setDropHandler(new DropHandler() {
+
+ public AcceptCriterion getAcceptCriterion() {
+ return AcceptAll.get();
+ }
+
+ public void drop(DragAndDropEvent event) {
+ getWindows()
+ .iterator()
+ .next()
+ .showNotification(
+ ((WrapperTransferable) event.getTransferable())
+ .getText());
+ }
+ });
+ addComponent(dropTarget);
+
+ Embedded iframe = new Embedded("", new ClassResource("html5drop.html",
+ this));
+ iframe.setType(Embedded.TYPE_BROWSER);
+ iframe.setWidth(400, Sizeable.UNITS_PIXELS);
+ iframe.setHeight(400, Sizeable.UNITS_PIXELS);
+ addComponent(iframe);
+
+ }
+
+ @Override
+ protected String getDescription() {
+ return "Should work. Try to e.g. drag the 'Hello Vaadin user' "
+ + "label to native text editor application. In text "
+ + "editor app 'HTML5!' text should appear.";
+ }
+
+ @Override
+ protected Integer getTicketNumber() {
+ return 7833;
+ }
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Insert title here</title>
+<script type="text/javascript">
+ if (window.addEventListener) {
+ window.addEventListener('load', init, false); //W3C
+ } else {
+ window.attachEvent('onload', init); //IE
+ }
+
+ function init(event) {
+ var el = document.getElementById("drop");
+ if (el.addEventListener) {
+ el.addEventListener("dragover", dragover, false);
+ el.addEventListener("dragenter", dragenter, false);
+ el.addEventListener("drop", drop, false);
+ } else if (el.attachEvent) {
+ el.attachEvent('ondragover', dragover);
+ el.attachEvent('ondragenter', dragenter);
+ el.attachEvent('ondrop', drop);
+ }
+ }
+
+ function dragover(event) {
+ event.dataTransfer.dropEffect = 'copy';
+ return cancel(event);
+ }
+
+ function drop(event) {
+ document.getElementById("drop").innerHTML = event.dataTransfer.getData('Text');
+ return cancel(event);
+ }
+
+ function dragenter(event) {
+ return cancel(event);
+ }
+
+ function cancel(event) {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ return false;
+ }
+</script>
+</head>
+<body>
+ <div id="drop">or over here</div>
+</body>
+</html>
\ No newline at end of file
projects / vaadin-framework.git / commitdiff