I'm creating a very simple drag and drop application.
The drag and drop functionality using html5 works perfectly on desktop.
I want to replicate the functionality of drag and drop using click(select) and click(target, drop).
What I want to happen.
You click on the element you want to move (i.e 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.
Is this achievable and how?
Thanks
<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>
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.
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>
