Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
TyphoidMaryPatrick
Posts: 3
Registered: ‎05-30-2013
My Device: Blackberry Z10
My Carrier: 4239874228
Accepted Solution

bbUI.js and jQuery UI drag and drop not working

Hey guys, I'm lost trying to integrate a drag and drop feature using jQuery into my bbUI.js app. I don't know where to place my init code that makes the element draggable. I tried just inlining it into my existing project flow but that doesn't seem to work. The elements are not draggable. I don't want to clog up the github issues page with a help request. Thanks!

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: bbUI.js and jQuery UI drag and drop not working

Hi there,

 

Can you provide a basic index.html that shows the issues you are having? I'm a little concerned with this mix though as the draggable elements are from jQuery UI (a UI framework) and bbUI.js is another UI framework. Generally mixing UI framework should be avoided (especially jQuery UI and bbUI.js) as both rely on replacing DOM content with their own elements during runtime. This means that certain elements you define may not exist if one framework or the other have made them their own. the draggable feature itself shouldn't be an issue, but the fact that it's accompanied by another whole UI framework may end up causing issues. It may be worth looking into a more generic drag/drop JS library.

 

Note that even mixing jQuery UI and jQuery Mobile (for a BB10 theme) isn't advised as the UI frameworks can conflict there as well.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
Asmooh
Posts: 69
Registered: ‎10-27-2010
My Device: Z10 STL100-2
My Carrier: Comviq & Telia

Re: bbUI.js and jQuery UI drag and drop not working

I have the same problem, is there a way in BBUI to make an item dragable? because we cannot use Jquery UI together with BBUI

 

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: bbUI.js and jQuery UI drag and drop not working

BBUI does not have built in "draggable" element support. You could use another library, though I would recommend using a specialized library to solve the "draggable" problem, as opposed to full frameworks like jQuery UI for the reasons you noted; mixing UI frameworks tends to be bad.

Just from a quick search, Draggabilly seems promising:
http://draggabilly.desandro.com/

Or you can go straight-up HTML5:
http://www.w3schools.com/html/html5_draganddrop.asp

Of course, other libraries and approaches are out there too.

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
Asmooh
Posts: 69
Registered: ‎10-27-2010
My Device: Z10 STL100-2
My Carrier: Comviq & Telia

Re: bbUI.js and jQuery UI drag and drop not working

Thanks,

But like any other libery it does not work together with an BlackBerry BBUI webworks app, only on the computer
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: bbUI.js and jQuery UI drag and drop not working


Asmooh wrote:
Thanks,

But like any other libery it does not work together with an BlackBerry BBUI webworks app, only on the computer

This isn't exactly accurate. There's no technical reason many libraries won't work with BBUI / WebWorks. In the end it's all just HTML, JavaScript, and CSS.

 

You do have to be careful, with BBUI, how you are using other libraries though.

 

BBUI takes an HTML fragment, loads it into memory, replaces a lot of the content with its own BBUI markup (still HTML though), creates a document fragment for the screen (still in memory at this point), and then injects that screen onto the main DOM in place of what was previously there.

 

So you can run into a few caveats if you are using a library that, for example, works by specifying "make element with ID MyElement draggable."

 

For example, BBUI offers the onscreenready and ondomready events to manipulate the screen before it is presented to the user.

 

If, in those functions, you use document.getElementById('MyElement'), then you likely won't be getting access to the actual element you want. This is because BBUI creates a document fragment, in memory, and only attaches that fragment to the actual DOM (i.e. document) after onscreenready and ondomready. This is why both of those functions provide the element variable, so that you can manipulate the screen before it is actually shown to the user.

https://github.com/blackberry/bbUI.js/wiki/Toolkit-Initialization

 

Another caveat, if you are manipulating the screen (via element) in onscreenready, you will likely run into issues. This is because BBUI hasn't done its DOM manipulation yet, it has simply loaded the HTML fragment into memory. If you make changes to the HTML fragment programmatically at this point, then BBUI may very well replace those changes as it parses the BBUI tags to generate the full HTML for the page.

 

In this case, by modifying the screen element in ondomready, you are:

1) Modifying the screen HTML that currently exists in memory and will be added to the DOM later.

2) Making your changes after BBUI has made its own changes, meaning classes, elements, etc. should not get overwritten.

 

 

At the end of the day, it's all just HTML5.

 

The reason that BBUI has issues with things like jQuery UI / Mobile, is because all of those frameworks rely on specifying custom attributes for HTML elements, and then replacing those HTML elements with what each framework says should be there instead (to create the actual elements the user will see.) If you have 2+ frameworks parsing and replacing HTML content, you're bound to have conflicts, not to mention multiple event handlers being added in many cases.

 

Mixing UI frameworks causes issues on just about any platform. But you certainly can leverage many libraries, with BBUI, for added functionality.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
Asmooh
Posts: 69
Registered: ‎10-27-2010
My Device: Z10 STL100-2
My Carrier: Comviq & Telia

Re: bbUI.js and jQuery UI drag and drop not working

[ Edited ]

In case if someone else is looking for this i have it working.

 

<script type="text/javascript" src="js/bbui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>

 

 $('#canvasphoto').droppable({ tolerance: 'fit' });

 

$( "#selectiondrag" ).draggable({
tolerance: 'touch',
animate: true,
scroll: false,
containment: $('#canvasphoto'),
revert: false,
drag: function(){
//var Startpos = $(this).position();
//$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
}
});

 

 

this did the trick (moving a div in a div)

 

I have as example a picture in background, and a div (405x405) that i can move left or right (but of the div allows you can also move it up or down)

 

 

I dont know if i really needed the areaselect, i just left it in.

jquery-ui i only selected draggable/resize/drop and the rest i left out.

 

 

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: bbUI.js and jQuery UI drag and drop not working

Great stuff Asmooh!

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.