单击拖放功能
[英]drag and drop functionality with click
问题描述
I'm creating a very simple drag and drop application. 
我正在创建一个非常简单的拖放应用程序。
The drag and drop functionality using html5 works perfectly on desktop. 使用html5的拖放功能可在桌面上完美运行。
I want to replicate the functionality of drag and drop using click(select) and click(target, drop). 我想使用click（select）和click（target，drop）复制拖放功能。
What I want to happen. 我想发生什么。
You click on the element you want to move (ie with mouse or finger in mobile situation) 您单击要移动的元素（即在移动情况下使用鼠标或手指）
the element you've selected is stored in the dom and then on the next click (in a target area) the element is appended. 您选择的元素将存储在dom中，然后在下次单击（在目标区域中）时添加该元素。
Is this achievable and how? 这可以实现吗？
Thanks 谢谢
3 个解决方案
解决方案1
2 已采纳 2017-05-15 11:36:41
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.clickableBtn {
border: 1px solid green;
background-color: #bed1a3;
display: inline-block;
padding: 10px 15px;
margin: 20px;
}
.clickableBtn:hover {
cursor: pointer;
}
.selected {
opacity: .3;
}
.targetArea {
border: 1px solid red;
background: orange;
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 20px;
}
.targetArea:hover {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="clickableBtn">Click me!!</div>
<div class="targetArea"></div>
<script>
$(function(){
$('.clickableBtn').on('click',function(e){
e.preventDefault();
if ( $(this).parent().prop('class') != 'targetArea' ){
$(this).toggleClass('selected');
}
});
$('.targetArea').on('click',function(e){
e.preventDefault();
if( $('.selected').lenght !== 0 ) {
$(this).append($('.selected'));
$('.selected').removeClass('selected');
}
});
});
</script>
</body>
</html>
解决方案2
1 2017-05-15 10:48:13
I would achieve this by storing the reference to "clicked" items in a variable (list, object, whatever suits you) after you click on them. 我可以通过在单击它们之后将对“已单击”项的引用存储在变量（列表，对象，任何适合您的变量）中来实现的。 When you click on "drop" area (figuring out what the "drop area" is in any way you want) just read that variable and "move" (probably with CSS) all clicked items to "drop" area. 当您单击“放置”区域（以任何方式弄清楚“放置区域”是什么）时，只需读取该变量，然后将所有单击的项目“移动”（可能使用CSS）到“放置”区域。
解决方案3
0 2017-05-15 10:38:51
The example below is a simple drag and drop example: 下面的示例是一个简单的拖放示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.