CODEWITHSUNDEEP
javascriptjquerydrag-and-dropsapui5
codeartist
codeartist

Reputation: 763

SAPUI5 : Drag and Drop

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

Upvotes: 1

Views: 4474

Answers (1)

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

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>

Upvotes: 2

Related Questions