SAPUI5：拖放

Question

我试图在 UI5 中实现拖放功能。但是，我无法正确实现它（不要评判我，我是初学者）

所以，事情是这样的。就像我开始从事这项工作时的其他人一样。我用谷歌搜索 "Drag and Drop in SAPUI5" 并找到了一些非常好的链接。但是，我想更多地了解如何处理相同的事件。这是相同的工作代码：

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

但是，我想做一些我无法理解如何实现的事情： 1. 获取将项目从一个列表拖放到另一个列表后触发的事件。 2. 获取那些项目的值

并在尝试搜索解决方案时。我遇到了很多网页和问题。在我看来，有一些重要的事情（如下所述），但我无法正确连接它们。任何帮助都很棒！

jQuery.sap.ControlEvents
浏览器事件
dragstart, dragover, drop

请原谅这么混乱的问题（我也很困惑把它放在正确的格式）

此致，普瑞坦

Answer 1

好的，正如评论中所建议的，这里有一个示例，说明您可以使用 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>

SAPUI5：拖放

SAPUI5 : Drag and Drop

javascript

jquery

drag-and-drop

sapui5