我发现 SAPUI5 支持拖放。但我无法在我的应用程序中实现相同的功能。我试图绑定到 dragstart 和 dragleave 事件,它们不起作用。
我什至尝试在其他线程中提供示例(http://jsbin.com/qova/2/edit?html,output)。这个例子也不起作用。我可以选择列表项,但是当我尝试拖动时,选择只是扩展并且没有任何反应。
如果我做错了什么,请告诉我。
这是 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 属性调用 jQuery-UI remove 属性并删除 CSS Class 属性。一旦我将列表项设为静态,拖放就可以正常工作。
当列表是动态的时,是否有拖放解决方案?
找到一个解决方案 请注意,此解决方案适用于使用单独的视图和控制器创建的 UI5 应用程序。
对于动态列表,jquery-ui draggable 必须调用 onAfterRendering。否则,一旦列表重新呈现,jquery-ui 添加的类将被删除。
对于像我发布的那样的内联 UI5 应用程序,我们可以尝试将“onAfterRendering”事件委托添加到列表控件。