Web and WebWorks Development

[meryapps]

Hi Guys,

I try a simple HTML5 Drag and drop script with Ripple on Chrome browser / Playbook Emulator - which works well and when I create the bar file and tested from PlayBook - not working !

What could be the possible reason ? I am using the latest BlackBerry WebWorks SDK for TabletOS 2.2.0.5 and my PlayBook running on 2.0.1

Thanks in Advance.

[oros]

Hi there,

Are you possibly implementing the drag/drop through mouse events (PC) as opposed to touch events (PlayBook)? That's all I have off the top of my head

Would you be able to post a code sample of an application?

[meryapps]

Yes Erik, you got the point.

What need to be done in order to work for playbook -> touch events - and I may have to refer to the below URL :

http://blackberry-webworks.github.com/WebWorks-API-Docs/WebWorks-API-Docs-tablet/view/Element.html

Thanks,

[oros · Accepted solution]

You got it, that's a great article to start with. As a quick comparison, a mouse event may look something like this:

image.onmousedown= function (e) {
	console.log('X: ' + e.clientX);
	console.log('Y: ' + e.clientY);
};

Whereas a touch event may look like this:

image.ontouchstart = function (e) {
	console.log('X: ' + e.touches[0].clientX);
	console.log('Y: ' + e.touches[0].clientY);
};

Note that for the event, we need to retrieve the specific touch point (i.e. 0 refers to the first touch point, this is assuming the user has one finger on the screen.) We then retrieve the X and Y coordinates of the touch. This is a very basic sample, that URL you noted will provide much more detail.

In general though, each mouse event has a corresponding touch event. Examples:

- mousedown : touchstart

- mouseup : touchend

- mouseover : touchmove / touchenter

- mouseout : touchleave

The key hurdle with touch event is being aware that there may be multiple touch points at a given moment. If you want to just stick with the first touch point, then the above sample with touches[0] would do that.

[meryapps]

Thanks Eric

This is the script i am looking for :

<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}

[oros]

That one gets a little more tricky. There may be some frameworks out there you could leverage, though perhaps invoking the functions you already have may work. For example:

image.ontouchstart= function (e) {
	e.preventDefault();
	dragStart(e);
};

The one issue that I'm seeing with the above is that the dragStart function requires a dataTransfer child that has various properties. It may be necessary to create and attach a dataTransfer child to the e variable before calling dragStart.

That being said, it looks like you're already using some framework here, is that right? There may simply be a way to "turn on" touch events with that framework. I've seen it as pretty common practice to not have mouse or touch enabled unless explicitly set during initialization. Though this would depend on the framework.