Javascript SAPUI5：拖放
我试图在UI5中实现拖放功能。但是，我无法正确地实现它（不要评判我，我是初学者） 所以，事情是这样的。就像我开始做这件事时的其他人一样。我在谷歌上搜索了“在SAPUI5中拖放”，发现了一些非常好的链接。然而，我想知道更多关于我如何在同样的情况下处理事件的信息。 以下是相同的工作代码： 但是，我想做一些我无法理解如何实施的事情： 1.获取在我将项目从一个列表拖放到另一个列表后触发的事件。 2.获取这些项目的值 在试图寻找解决方案的同时。我遇到了很多网页和问题。在我看来，有一些重要的事情（如下所述），但我无法正确地将它们联系起来。任何帮助都是伟大的Javascript SAPUI5：拖放,javascript,jquery,drag-and-drop,sapui5,Javascript,Jquery,Drag And Drop,Sapui5,我试图在UI5中实现拖放功能。但是，我无法正确地实现它（不要评判我，我是初学者） 所以，事情是这样的。就像我开始做这件事时的其他人一样。我在谷歌上搜索了“在SAPUI5中拖放”，发现了一些非常好的链接。然而，我想知道更多关于我如何在同样的情况下处理事件的信息。 以下是相同的工作代码： 但是，我想做一些我无法理解如何实施的事情： 1.获取在我将项目从一个列表拖放到另一个列表后触发的事件。 2.获取这些项目的值 在试图寻找解决方案的同时。我遇到了很多网页和问题。在我看来，有一些重要的事情（如下所述
Preetam好的，正如评论中所建议的，下面是一个使用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>
可拖动{
宽度：150px；
边框：1px实心#999999；
填充：1px；
}
ul.draggable李{
背景色：#9999ff；
保证金：1px；
}
* {
列表样式：无
}
#显示，#显示2{
边框：1px实心#000；
填充物：5px；
}
$（文档）.ready（函数（）{
//将设置为可拖动
$（'ul.draggable li'）。draggable({
开始：功能（事件、用户界面）{
//在这里做点什么
//范例
////显示被拖动元素的innerHTML
$（'#display2'）.html(
$（this.html（））
);
},
});
//这意味着可以接受要放入其中的元素
$（'ul.draggable'）。可拖放({
drop:function（event，ui）{//当元素被删除时
//注意：拖放的- 是ui.draggable；拖放框是$（此）
//DragTable（）使用样式属性将项目移出框；最初将其设置为“位置：相对”，当客户端移动项目时，样式中会添加“左”和“顶”。
//如果删除此属性，则项目将整齐地放置到位。
//取而代之的是，我们替换style属性并将其设置回“position:relative”，因此它仍然是可拖动的
ui.draggable.attr（'style'，'position:relative'）
.appendTo（$（this））；//我们从父对象中剪切
- ，并将其粘贴到放置它的框中
//范例
////显示被拖动元素的innerHTML+“dropbox”+dropbox的id
$（'#display2'）.html(
ui.draggable.html（）
);
},
结束：功能（事件、用户界面）{
//在这里做点什么
$（'#display'）.html（'dragover'）；
},
输出：功能（事件、用户界面）{
//在这里做点什么
$（'#display'）.html（'out'）；
}
});
});
- 阿姆斯特丹
- 柏林
- 伦敦
- 纽约
- 巴黎
- 布里斯班
- 墨尔本
- 珀斯
- 悉尼
- 卧龙岗