如何处理SAPUI5中从ListBox的拖放? [英] How to handle Drag and drop from ListBox in SAPUI5?
问题描述
我发现SAPUI5支持拖放. 但是我无法在我的应用程序中实现相同的功能.我试图绑定到dragstart和dragleave事件，它们不起作用.
I could find that drag and drop are supported in SAPUI5. But I am not able to implement the same in my app. I tried to bind to the dragstart and dragleave events, they are not working.
我什至尝试示例其他线程中提供的示例( http://jsbin. com/qova/2/edit?html，输出).这个例子也不起作用.我可以选择列表项，但是当我尝试拖动时，选择项只会扩展而没有任何反应.
I even tried to example provided in the other threads(http://jsbin.com/qova/2/edit?html,output). This example is also not working. I can select the list item, but when I try to drag, the selection just extends and nothing happens.
如果我做错了任何事情，请告诉我.
Please let me know if I am doing anything wrong.
这是HTML快照
源代码
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5 Listbox Drop and Drag" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Drop List Test</title>
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons">
</script>
<script type="text/javascript">
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
$(function() {
$("#lb1-list, #lb2-list").sortable({
connectWith : ".ui-sortable"
}).disableSelection();
});
var city1 = "Berlin|London|New York|Paris|Amsterdam",
city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong";
var oListBox1 = new sap.ui.commons.ListBox( "lb1", {
items : $.map(city1.split("|").sort(), function(v, i) {
return new sap.ui.core.ListItem({ text : v });
}), height : "150px"
});
var oListBox2 = new sap.ui.commons.ListBox("lb2", {
items : $.map(city2.split("|").sort(), function(v, i) {
return new sap.ui.core.ListItem({text : v });
}), height : "150px"
});
var oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false})
oLayout.createRow(oListBox1, oListBox2).placeAt("content");
</script>
</head>
<body id="body" class="sapUiBody">
<div id="content"></div>
</body>
</html>
更新:如果列表是静态的，则解决方案可以正常工作.但是对于动态列表，我们通过代码在其中添加行，SAPUI5重新呈现该列表并调用remove属性. remove属性调用jQuery-UI remove属性并删除CSS Class属性.一旦将列表项设为静态，拖放操作就可以正常工作.
Update: The solution works fine if the list is static. But for dynamic lists, where we add rows via code, SAPUI5 re-renders the list and calls remove attributes. The remove attributes call the jQuery-UI remove attributes and removes the CSS Class attributes. Once I made the list items static, the drag drop is working fine.
动态列表时是否有拖放的解决方案?
Is there a solution for drag-drop when the list is dynamic?
找到了一个解决方案 请注意，此解决方案适用于使用单独的视图和控制器创建的UI5应用程序.
Found one solution Please note, this solution is for UI5 applications created with separate views and controllers.
对于动态列表，jquery-ui draggable必须在onAfterRendering中调用.否则，一旦列表重新呈现，由jquery-ui添加的类将被删除.
For dynamic lists, the jquery-ui draggable has to called in onAfterRendering. Otherwise, the classes added by jquery-ui will be removed once the list re-renders.
对于像我发布的那样的内联UI5应用程序，我们可以尝试将"onAfterRendering"事件委托添加到列表控件中.
For inline UI5 apps like the one I posted, we can try adding "onAfterRendering" event delegate to list controls.
推荐答案
找到了一个解决方案:
请注意，此解决方案适用于使用单独的视图和控制器创建的UI5应用程序.
Please note, this solution is for UI5 applications created with separate views and controllers.
对于动态列表，jquery-ui draggable必须在控制器的onAfterRendering中调用.否则，一旦列表重新呈现，由jquery-ui添加的类将被删除.
For dynamic lists, the jquery-ui draggable has to called in onAfterRendering of the controller. Otherwise, the classes added by jquery-ui will be removed once the list re-renders.
对于内联UI5应用程序(例如我发布的问题中的应用程序)，我们可以尝试将"onAfterRendering"事件委托添加到列表控件中.
For inline UI5 apps like the one in the question I posted, we can try adding "onAfterRendering" event delegate to list controls.
这篇关于如何处理SAPUI5中从ListBox的拖放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
