Drag and drop for UI5

Hi everyone,
Is it possible to drag and drop the UI elements in sap ui5? Because writting all the code is very lengthy. If it is possible then how we can do that?
Regards,
Soumya

Hi Soumya,
App builder IDE is a  release from SAP that enables you to develop SAPUI5 mobile apps with OData, SMP, rest etc. SAPUI5 apps are based on web browser hence it will runs in desktop, tablets and mobile devices. One of the biggest example is the FIORI apps. These are based on SAPUI5 that runs in desktop, tablets and mobile devices. Please have a look on below link .

Similar Messages

  • Drag and drop for PC and Tablet issues

    Hi!
    I’m doing a drag and drop for both PC and tablet.
    I need to allow any elements (draggables) to be able to drop into any of the droppable areas and not just restrict to 1 area. I tried using the if/else statement, but I can’t seem to make it work. For example, Position 1 (droppable area) must be accept all the cases – case1, case2, case3 (draggables), but only 1 draggable on a droppable at any one time.
    I hope you can help me out, or atleast helping me with the if/else statement.This is a link to my folder.https://www.box.com/s/0pksqtpmqg7zae43en66
    —————————————these are my codes, in case you can’t open the file.———————————————————–
    yepnope(
    nope:[
    'js/jquery-ui-1.9.2.custom.min.js',
    'js/jquery.ui.touch-punch.min.js',
    'css/jquery-ui-1.9.2.custom.min.css'
    complete: init
    function init() {
    var stage = sym.$(“Stage”);
    //DRAGGABLE. case1
    //var _1 = sym.$(“_1″); changed _1 to _2
    var _2 = sym.$(“_2″);
    _2.css(“position”, “absolute”);
    _2.draggable({ disabled: false });
    _2.draggable({ containment: stage });
    //for(var i=1; i<=9;i++){
    _2.draggable({
    snap: '.target1',
    snapMode: 'centre'
    //DROPPABLE
    var position1 = sym.$("position1");
    position1.css("position", "absolute");
    //     position1.css("left", 375);
    //     position1.css("top", 25);
    //position1.on( "dropout", function( event, ui ) {
    //drop into position1
    position1.droppable({
    accept: ".case1",
    drop: function(event, ui) {
    console.log(this.childNodes);
    var element2 = sym.$(".Stage_position1__1Black_Eagle_id"); //Stage_position1__1Black_Eagle_id
    element2.show();
    _2.hide();
    /*else if(_1){
    var element = sym.$(".Stage_position1__2Green_Parrot_id");
    element.show();
    _1.hide();
    // adds visual when correct drops here
    //case2. _5
    //DRAGGABLE
    var _5 = sym.$("_5");
    _5.css("position", "absolute");
    _5.draggable({ disabled: false });
    _5.draggable({ containment: stage });
    //for(var i=1; i<=9;i++){
    _5.draggable({
    snap: '.target2',
    snapMode: 'corner'
    //DROPPABLE
    var position2 = sym.$("position2");
    position2.css("position", "absolute");
    position2.droppable({
    accept: ".case2",
    drop: function(event, ui) {
    console.log(this.childNodes);
    var element5 = sym.$(".Stage_position2__5Black_Snake_id");
    element5.show();
    _5.hide();
    //case3. _7
    //DRAGGABLE
    var _7 = sym.$("_7");
    _7.css("position", "absolute");
    _7.draggable({ disabled: false });
    _7.draggable({ containment: stage });
    _7.draggable({
    snap: '.target3',
    snapMode: 'corner'
    //DROPPABLE
    var position3 = sym.$("position3");
    position3.css("position", "absolute");
    position3.droppable({
    accept: ".case3",
    drop: function(event, ui) {
    console.log(this.childNodes);
    var element7 = sym.$(".Stage_position3__7Green_Praying_Mantis_id");
    element7.show();
    _7.hide();
    });// end of codes
    Can anyone help me to figure out the if/else or switch statement to be used? I tried both but it doesn' work. This is my switch statement.
    var stage = sym.$(new bigElements) ;
    switch (bigElements) {
    //list down all the possible cases/scenarios.
      case "Stage__2":
              alert("Just like the sky!");
        break;
      case "Stage__5":
                  alert("Just like shiraz!");
        break;
      case "Stage__7":
        alert("Suit yourself then...");
        break;
      default:
        alert("lalala...");
    var stage = sym.$(new bigElements)
    switch (bigElements) {
      case "Stage__2":
        alert("Just like the sky!");
        break;
      case "Stage__5": //"case2"
       alert("Just like shiraz!");
        break;
      case "Stage__7":
       alert("Suit yourself then...");
        break;
      default:
         alert("lalala...");
    I've only included excerpt of the codes to let you have an idea of it. Thank you so much for your time.

    It seems like you're asking about JS for web-pages. This forum is about JS
    in PDF documents.

  • Is there any way to disable right click and drag and drop for photos on iweb?

    Re: protecting photos when using iweb as your web designer...
    Is there any way to disable right click and drag and drop for photos using iweb?  I have seen tutorials about creating a text box around each image - but is there a better way? 

    However, there is no way you can prevent someone from making a screenshot of the image as it is displayed on the screen no matter what application you use to create the web page.
    You can add a watermark to dissuade the casual "thief" but those who are serious about stealing the photo for their own use can remove the watermark with some effort.
    OT

  • Drag and Drop for Creative Cloud CS applications

    I just joined Creative Cloud for CS software applicatons; I am already a Muse user - will I need to cancel that use and download Muse again to avoid double payment? Also, I am not able to drag and drop the CS applications at this time - is it not yet available? If not, when will it? Even the Muse app would not drag and drop for download?
    Thank you.

    Are you trying to install the applications my dragging the application icon from the Creative Cloud Apps page at https://creative.adobe.com/apps to your computer? If so that will not work since that is just an image in the web page.
    To install click on the Download (or Try for trial members) link and the Adobe Application Manager (AAM) should download and install. AAM will then handle the installation of the applications.

  • Drag and Drop in UI5

    Hi Colleagues,
    We would like to use Drag-and-Drop features in our SAP UI5 Application similar to the following example: http://jsbin.com/qova/2/edit
    (in our use-case we would like to re-order the items in a list). The given example works only in IE 10 but not in Chrome. Is there another possibility to implement D&D in Chrome?
    Thanks,
    Hristina && Wei

    Hi,
    We would like to have D&D for mobile controls as shown below but it does not work... Is the functionality supported for the mobile controls?
    var
    oListBox2 = new sap.m.List("lb2", {
    items : $.map(city2.split("|"), function(v, i) {
    return new sap.m.StandardListItem({title : v });
    }),           height :
    "150px"
    }).addEventDelegate({
    onAfterRendering :function() {
    $("#lb2-list").sortable({
    connectWith : ".ui-sortable"
                                  }).disableSelection();
    Thanks in advance,
    Hristina && Wei

  • Itunes 11.1.4 won't drag and drop for ios 5.0.1

    I have an older iPod touch running 5.0.1 and have ALWAYS manually managed the music on it.  I recently updated itunes to 11.1.4.62 and now the 'drag and drop' function in itunes doesn't work.  I have verified that the 'manually mangage music and videos' is checked.  I really don't want to upgrade the ios as I don't need the newer features.  I simply use this for music.  Is this a bug with the latest itunes?

    used a different computer running 11.0.5.5 and that worked.  I guess this is a new 'feature' with 11.1.x?

  • I cannot drag and drop for Photos in 10.10.3

    I seem to be unable to drag and drop from the new Photos application in Yosemite 10.10.3.  I have tried this with two different applications including Adobe's Photoshop Elements 13.  It seems to work fine with other apple applications.  (can drag and drop to desktop and to pages - only two I've tried) 
    However, it is very frustrating not to be able to drag and drop from Photos to another photo editing software.  Additionally, when I try to open a file from photos while in Photoshop using the menu - Photoshop crashes.  It appears I have no way to edit my photos in Photoshop if I store them in Photos...anybody else?

    Photos is a brand new, completely rewritten application. Adobe (and others) have not yet added compatibility with it.
    Exporting your your images to the desktop, then bringing them back into Photos, is the only way for external editing right now.

  • Drag and Drop for Tree in a Table

    I have placed a tree in a table using the example provided in an article "Creating TreeTables in Swing" in java.sun.com. But , instead of using the FileSystem data with which the example was explained , i have passed my own data...Then i created a panel wherein i placed two of these tables with buttons in between.
    The buttons are meant for data transfer....The problem is if i implement Drag and Drop support for the TreeTable the Tree embedded in the Table doesn't expand and collapsing properly....
    Can there be any reason that if a tree is placed in a Jtable and the drag and drop is enabled using setDragEnabled(true) will it effect the normal behaviour

    You can implement DropTargetListener, DragSourceListener, DragGestureListener like the following:
    public class MyTree extends JTree
                implements DropTargetListener, DragSourceListener, DragGestureListener {
        public void dragEnter (DropTargetDragEvent event) {
            event.acceptDrag (DnDConstants.ACTION_MOVE);
        public void dragExit (DropTargetEvent event) {
            //System.out.println( "dragExit");
        public void dragOver (DropTargetDragEvent event) {
        public void drop (DropTargetDropEvent event) {
            // place your code for action after drop
        public void dropActionChanged ( DropTargetDragEvent event ) {
        public void dragGestureRecognized( DragGestureEvent event) {
        public void dragDropEnd (DragSourceDropEvent event) {  
        public void dragEnter (DragSourceDragEvent event) {
            //System.out.println( " dragEnter");
        public void dragExit (DragSourceEvent event) {
            //System.out.println( "dragExit");
        public void dragOver (DragSourceDragEvent event) {
            //System.out.println( "dragExit");
        public void dropActionChanged ( DragSourceDragEvent event) {
            //System.out.println( "dropActionChanged");
    }Hope this can help.

  • Drag and Drop for File Uploads

    Hey,
    Is it possible to do this in Flex? Drag and Drop files into a flex app - to upload them later (say on a button click). I did some searching and found that it is possible to do this in AIR - drag files from the file system and drop it in the app. But our app is web based and will be running in a browser.
    Thanks

    I have suffered from this during the past three days.
    Firefox 23.0, Mozilla Firefox for Ubuntu canonical - 1.0
    on a 32-bit Ubuntu PC. So the system couldn't be more different.
    I was trying to upload .MP3 files of 27MB. From about a dozen attempts with one file, no success whatever. On the other hand a different file worked first time. But a later attempt with a 14 MB .wav failed, so it's not related to the file.
    On the other hand an upload with Chrome worked perfectly. So it does look like a browser problem.
    Watching the system monitor during upload, it runs freely for about 9MB, then stops abruptly. At the same time, the message at the bottom left of the browser window, relating to dl-web.dropbox, disappears.
    The text of the message differed between Firefox & Chrome, but I imagine that's just a textual, rather than a functional, difference.

  • Drag and Drop for the tableview

    Can drag and drop used for a row in the tableview, how to do it?

    try this ;) ( i work on FXML project)
    @FXML
    TableView<String> tableView;
    private  ObservableList<String> tableContent = FXCollections.observableArrayList();
    tableView.setOnMouseClicked(new EventHandler<MouseEvent>() { //click
                    @Override
                    public void handle(MouseEvent event) {
                            if(event.getClickCount()==2){ // double click
                                String selected = tableView.getSelectionModel().getSelectedItem();
                                if(selected !=null){
                                    System.out.println("select : "+selected);
    tableView.setOnDragDetected(new EventHandler<MouseEvent>() { //drag
                @Override
                public void handle(MouseEvent event) {
                    // drag was detected, start drag-and-drop gesture
                    String selected = tableView.getSelectionModel().getSelectedItem();
                    if(selected !=null){
                        Dragboard db = tableView.startDragAndDrop(TransferMode.ANY);
                        ClipboardContent content = new ClipboardContent();
                        content.putString(selected);
                        db.setContent(content);
                        event.consume();
    tableView.setOnDragOver(new EventHandler<DragEvent>() {
                    @Override
                    public void handle(DragEvent event) {
                        // data is dragged over the target
                        Dragboard db = event.getDragboard();
                        if (event.getDragboard().hasString()){
                            event.acceptTransferModes(TransferMode.COPY_OR_MOVE);
                        event.consume();
    tableView.setOnDragDropped(new EventHandler<DragEvent>() {
                    @Override
                    public void handle(DragEvent event) {
                        Dragboard db = event.getDragboard();
                        boolean success = false;
                        if (event.getDragboard().hasString()) {           
                            String text = db.getString();
                            tableContent.add(text);
                            tableView.setItems(tableContent);
                            success = true;
                        event.setDropCompleted(success);
                        event.consume();
                });  

  • Drag-and-drop for image stacks

    I'd like to be able to drag and drop image stacks from one folder to the next. Currently, when I drag and drop it just grabs one of the images from the stack and leaves the others behind.
    I can expand the stack and then drag and drop all of them, but the stack itself is lost--I have to go to the destination directory and re-stack the images.
    Bart

    I've discovered (and its nowhere in the documentation as far as I can see) that if you select the bottom slide in a stack .. ie the bottom left hand corner of the "reperesenation of the lower slides" you can drag and drop the stack(s) in to another folder.
    Unfortunately they don't remain stacked ..Here's another vote for persistent stacks.
    Pete Roberts

  • Prevent drag and drop for QT web movies

    I've tried protecting QT movies on my web site using kioskmode, like this:
    http://www.apple.com/quicktime/tutorials/embed2.html#kioskmode
    but despite what Apple says, drag and drop remains enabled. Anyone know how to fix that?
    conran

    If your goal is to "protect" your videos the kioskmode="true" tag will be the weakest link.
    http://streamingmediaworld.com/gen/voices/praja/praja1.mov
    You can open and save the file using the Safari (or any other browser) by using the Safari Activity window.
    You can also download by dragging the link to the Download window.
    I use the Save As Un-Editalbe droplet on some of my files. Needs some work to run on a Tiger OS and you can email me for a copy that is Tiger "ready". Screen name (left) @ mac.com.
    But I still don't understand how drag and drop works if the file is "protected" via kioskmode="false" tags.

  • Drag and Drop For String Control

    Hello all,
    I attached a example program, where I did not see event for String Drag Starting?.
    Is it normal.
    I placed a break point and I tried to start draging, but I hvn't seen the event.
    Please let me know, if this is normal.
    Thanks,
    Attachments:
    Drag and Drop -String.vi ‏45 KB

    Extract from the LV help for this event :
    Generated when you start a drag
    from a listbox control. Use this event to signal
    when a drag and drop operation begins from a specific control. This
    event is generated only when LabVIEW begins a drag and drop operation on
    a listbox control. You can use the Start Drag method to begin a drag from other controls.

  • After upgrade to Yosemite, drag and drop for files does not work, destination folder crashes.

    After upgrading to Yosemite, dragging and dropping files from one location to the destination folder, causes the destination folder crash. However, copying the file and then moving it works fine.
    I'm not sure where to report bugs, but I figured this would be the best option

    http://www.apple.com/feedback/  Feedback
    https://bugreport.apple.com/  BugReporter

  • Drag and drop for carousel

    How can I drag an item from a carousel and drop into a table???
    I used <af:componentDragSource> for carousel and <af:dropCollection> in the table. but dont work

    Hi,
    It could well mean that you've not set the dropTarget correctly. Check if you've added proper dataFlavor.
    Refer : http://www.oracle.com/technetwork/developer-tools/adf/learnmore/60-table-drag-n-drop-sample-176981.pdf
    -Arun

Maybe you are looking for