cancel
Showing results for 
Search instead for 
Did you mean: 

Draggable Objects

Former Member
0 Kudos

Hello Community, I'm new in working with SAP DS SDK and desperately trying to create a draggable object. I have read that DS SDK does include JQuery.

If I would like to modify a given coloredbox example and make it draggable (like in this example: http://jqueryui.com/draggable/#default) I would theoretically just need to put this.draggable(); into the onclick event. But I think there is something wrong what I do.

var that = this;

this.init = function() {

this.$().addClass("coloredBox");

this.$().click(function() {

     that.fireEvent("onclick");

     that.draggable(); });

};

Can anybody help me please?

Many thanks,

Emil

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Ok. Hello @all.

I just figured out where my mistake was. I forgotten to delete the jqueryui library and the jsinclude xml entry, had the link and the library at the same time.

It works well, with this entry on the beginning of the .js, as Mustafa mentioned:

jQuery.sap.require("sap.ui.thirdparty.jqueryui.jquery-ui-draggable");

and with

this.$().draggable(); in the init, as Karol mentioned.

Thank you both guys!!

Just one last note, the .draggable() method works well with couple of objects, but if you have some more of them it makes some problems, the grabbing does not work always.

Regards,

Emil

Answers (2)

Answers (2)

Karol-K
Advisor
Advisor
0 Kudos

Hi Emil,

I could achieve the "drag effect" in SDK (put instead of your line " that.draggable(); ").

Here is your code:


// get the jquery obejct from that

var jqThis = that.$();

// set draggable attribute to true

jqThis.attr("draggable", "true");

//  bind also dragend with function

jqThis.bind("dragend", function(e) {

  // fire SDK event (need addition in contribution.xml)

  that.fireEvent("ondrop");

  // switch off draggable again - activate via simple click (not a must)

  jqThis.attr("draggable", "false");

});

also, by adding the event handler "ondrop" in contribution.xml, you can react on drop event.


<property

  id="ondrop"

  title="On Drop"

  type="ScriptText"

  group="Events"/>

and when you put some script there, it will be executed, - like this example wil lmove the box by 200px.


COLOREDBOX_1.setLeftMargin(COLOREDBOX_1.getLeftMargin() + 200);

I could not get the "draggable()" function working, perhaps someone can answer this part, but the attribute setting is working perfectly.

Regards, Karol

Former Member
0 Kudos

Hello Karol,

thanks for helping, your solution works perfectly. But i'm still  interested in the jqueryui draggable() solution. I simply do not understand why it does not work. I included the library, I have written the function. It simply does not work. Curios.

Many thanks.

Regards, Emil

Karol-K
Advisor
Advisor
0 Kudos

Hi Emil,

which library ave you included - there are some interesting posts on the google by "js draggable not working" or "draggable doesnt work", eg. jQuery UI Draggable Not Working - Stack Overflow

The "draggable()" function seems to be included in jqueryUI which I think is not packaged in the standard JS which Design Studio gets from SAPUI5.

there is also a nice testing page: Edit fiddle - JSFiddle

Regards, Karol

Former Member
0 Kudos

Hi Karol,

I did this here:

1) Download jQueryUI from www.jqueryui.com

2) After unzipping, import the jquery-ui.js file into the res/js folder of your SDK component

3) In the contribution.xml file, include afor the jquery-ui.js file

in my .js I have added

$(this).draggable();

The endresult should look like in this example:

http://jqueryui.com/draggable/#default


Regards,

Emil

MustafaBensan
Active Contributor
0 Kudos

Hi Emil,

Did you try my other suggested approach of simply placing the following statements at the beginning of your component.js file?:

jQuery.sap.require("sap.ui.thirdparty.jqueryui.jquery-ui-core")

or:

jQuery.sap.require("sap.ui.thirdparty.jqueryui.jquery-ui-draggable")



The above statements can be tried INSTEAD of manually including the jquery-ui.js file.  I haven't tried myself but in the theory, this should load the relevant sections of the jQueryUI library that is packaged with UI5.

Regards,

Mustafa.

Former Member
0 Kudos

Hello Mustafa,

yes, I tried both suggestions. I do not know what is wrong, probably I did some mistakes.

Here my entire .js:

//I tried it with and without semicolon.

jQuery.sap.require("sap.ui.thirdparty.jqueryui.jquery-ui-draggable");

sap.designstudio.sdk.Component.subclass("com.sap.sample.coloredbox.ColoredBox", function() {

var that = this;

this.init = function() {

this.$().addClass("coloredBox");

this.$().click(function() { that.fireEvent("onclick"); });

$(function() { 

       this.dragabble();  //I tried it also without function, just this.draggable().

});

this.$().mouseover(function() { that.fireEvent("mouseover"); });

};

Many thanks.

Regards,

Emil

Karol-K
Advisor
Advisor
0 Kudos

in all the examples the "draggable()" is applied on the jquery object, not directly on this.

I would exepct more something like..

this.$().draggable();

and not

this.draggable();

for the simplicity, would be better to make this directly in init.

Former Member
0 Kudos

I applied it on the jquery object also, as you shown - this.$().draggable(); and also in my init. Still does not work.

Karol-K
Advisor
Advisor
0 Kudos

Hi,

this is really interesting topic.. I tried some "tricks". First for me the question is what is the root cause, as this MUST work..

so, root cause analysis from the baseline.

I have read again the forum jQuery UI Draggable Not Working - Stack Overflow and tried to include the jquery-ui to get it loaded. So, first try is always a code copy..

I have aded the complete content of the original page http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js into my js file:

then this works as here in debugger

so definitely the issue is in the "require" part...

now we need someone who fix that..


Regards, Karol

Karol-K
Advisor
Advisor
0 Kudos

ups.. parallel work - I see you fond it! very good!

Former Member
0 Kudos

Thanks for helping Karol.

MustafaBensan
Active Contributor
0 Kudos

Hi Emil,

A couple of considerations:

1)  Although the draggable functionality is provided by the JQueryUI library I'm not sure if this is automatically included in the Design Studio framework.  You may need to explicitly include the appropriate version of jquery-ui.js in your contribution.xml file;

2)  Assuming JQueryUI is correctly loaded, I don't think the draggable function should be attached in the click event handler as it is independent of this.  The jQueryUI draggable function should automatically take care of the related mouse events.  The init function code might look something like this:


this.init = function() {

  this.$().addClass("coloredBox");

  this.$().click(function() {

  that.fireEvent("onclick");

  });

  this.draggable();

  };

I'm not sure about the exact draggable syntax above but you can check out the variations.

Regards,

Mustafa.

Former Member
0 Kudos

Hello Mustafa,

thank you for your reply. I have tried to put it out of the onclick function as you did, unfortunately it still does not work. Furthermore I have noticed, that my application did not longer work correctly, as I had put this.draggable() out the onclick function. Probably it could be a indication that SAP DS does not include JQueryUI.

So, the next question would be, is JQueryUI library includable into SAP DS SDK or SAP DS?

If yes, how does it work?

Many thanks,

Emil

MustafaBensan
Active Contributor
0 Kudos

Hi Emil,

EDIT:  First you can try simply adding the following statement to the beginning of your component.js file:

jQuery.sap.require("sap.ui.thirdparty.jqueryui.jquery-ui-core")


Only otherwise the manual approach below might work:

1) Download jQueryUI from www.jqueryui.com

2) After unzipping, import the jquery-ui.js file into the res/js folder of your SDK component

3) In the contribution.xml file, include a <jsinclude> for the jquery-ui.js file

Let me know how that goes.

Regards,

Mustafa.

Message was edited by: Mustafa Bensan

Former Member
0 Kudos

Hello Mustafa,

thanks for helping, the including of jqueryui was successful, but it still does not work. I decided to try it with multitouch drag II, like in this d3js example:(http://bl.ocks.org/mbostock/9669633#index.html). Hopefully it will work. But i'm still very interested in the jqueryui draggable() solution. I'll tell you, should I figure out something interesting.

Many thanks. Regards,

Emil