Как обрабатывать перетаскивание из ListBox в SAPUI5?
Я мог бы обнаружить, что перетаскивание поддерживается в 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 и удаляют атрибуты класса CSS. Как только я сделал элементы списка статичными, перетаскивание работает нормально.
Есть ли решение для перетаскивания, когда список является динамическим?
Нашел одно решение Обратите внимание, что это решение предназначено для приложений UI5, созданных с отдельными представлениями и контроллерами.
Для динамических списков перетаскиваемый jquery-ui должен вызывать onAfterRendering. В противном случае классы, добавленные jquery-ui, будут удалены после повторного рендеринга списка.
Для встроенных приложений UI5, подобных тому, который я опубликовал, мы можем попробовать добавить делегат события «onAfterRendering» в элементы управления списком.