on 08-19-2014 3:46 PM
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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.
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
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
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
User | Count |
---|---|
87 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.