1

I have trying to implement drag and drop feature in UI5. However, I am unable to implement it properly (Don't judge me, I am a beginner )

So, here is the thing. Just like anyone else when I started to work on this. I googled "Drag and Drop in SAPUI5" and found some really good links. However, I want to know more about how I can play around with events for the same. Here is a working code for the same:

http://jsbin.com/iciyof/2/edit?html,js,output

However, I want to do few things that I am unable to understand how to implement: 1. get the events that triggers after I drag and drop the item from one list to another. 2. get the values of those items

and while trying to search for the solution. I came across a whole lot of web pages and question. In my opinion there are some important things(mentioned below), But I am unable to connect it all properly. Any help is great!

  1. jQuery.sap.ControlEvents
  2. Browser Events
  3. dragstart, dragover, drop

Pardon for so confusing question (I am also confused to put it in proper format )

Best Regards, Preetam

3
  • Do you insist on using SAPUI5 (I've never heard of that, but I can take a look at the documentation)? You can do drag/drop with jQuery-UI Feb 5, 2015 at 14:50
  • Actually, Can you point me how to use these events in jQuery UI. To get the data or selected item for drag?
    – codeartist
    Feb 5, 2015 at 14:56
  • 1
    After about 3 years, drag and drop is now supported by UI5 out of the box. This applies to all controls which inherit from sap.m.ListBase (such as sap.m.Table, List, Tree, etc..). Nov 16, 2017 at 10:22

1 Answer 1

2

Okay, as suggested in the comments, here is an example of what you can do just with jQuery-UI

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <style>
        ul.draggable {
            width: 150px;
            border: 1px solid #999999;
            padding: 1px;
        }
        ul.draggable li {
            background-color: #9999ff;
            margin: 1px;
        }
        * {
            list-style: none
        }
        #display, #display2 {
            border: 1px solid #000;
            padding: 5px;
        }
    </style>
    <script>
        $(document).ready(function() {
            // set the <li> as draggable
            $('ul.draggable li').draggable({
                start: function(event, ui) {
                    // do something here
                    // example
                    //// show the innerHTML of the dragged element
                    $('#display2').html(
                        $(this).html()
                    );
                },
            });
            // this means the <ul> can accept elements to be dropped in it
            $('ul.draggable').droppable({
                drop: function(event, ui) {  // when the element has been dropped
                    // notice: the dragged/dropped <li> is ui.draggable; the dropBox is $(this)
                    // draggable() uses a style attribute to move the item out of its box; initially it is set to 'position: relative', as the client moves the item, a 'left' and 'top' is added in the style.
                    // If we remove this attribute, the item will be neatly in place.
                    // In stead we replace the style attribute and set it back to 'position: relative', so it is still draggable
                    ui.draggable.attr('style', 'position: relative')
                        .appendTo($(this)); // we cut the <li> from its parent, and paste it in the box where it was dropped

                    // example
                    //// show the innerHTML of the dragged element + "dropped" + the id of the dropbox
                    $('#display2').html(
                        ui.draggable.html() + ' dropped in ' + $(this).attr('id')
                    );

                },
                over: function(event, ui) {
                    // do something here
                    $('#display').html('dragover');
                },
                out: function(event, ui) {
                    // do something here
                    $('#display').html('out');
                }

            });
        });
    </script>
</head>
<body>
<ul id="box1" class="draggable">
    <li>Amsterdam</li>
    <li>Berlin</li>
    <li>London</li>
    <li>New York</li>
    <li>Paris</li>
</ul>

<ul id="box2" class="draggable">
    <li>Brisbane</li>
    <li>Melbourne</li>
    <li>Perth</li>
    <li>Sydney</li>
    <li>Wollongong</li>
</ul>
<div id="display"></div>
<div id="display2"></div>
</body>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.