drag and drop functionality with click - javascript

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>
Refrence Link

Related

Get original parent ID if JQuery sortable element is moved from one parent to another

I am using the JQuery UI sortable plugin, using the "connect with" functionality to allow LI elements to be moved between two different parent lists.
I am trying to produce an alert showing the ID of the original list from which the LI element was contained when a list item is moved from either #sortable1 to #sortable2 or visa versa.
The Jquery I am trying to use this as follows:
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.originalPosition.id);
}
}).disableSelection();
});
Currently this produced a undefined output, rather than #sortable1 to #sortable2.
I have included below a sample script recreating the issue I am having.
<!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.13.0/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-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.originalPosition.id);
}
}).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>
The ui object (Sortable) has a sender jQuery object that has as the originating element.
Set your alert to this: ui.sender[0].id and you'll have it.
<!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.13.0/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-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.sender[0].id);
}
}).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>

jQuery sortable own element as placeholder

I'm implementing a connected list like a Kanban board. Everything works but the placeholder is still missing. I'm looking now for a way to add a the own element as placeholder like how they done it in Gitlab:
How can I do this? I know that there is a placeholder variable but I'm not sure how I can use the same element as placeholder. This is my code:
jQuery( document ).ready( function ( $ ) {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
#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;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
</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>
Does something like this help you?
jQuery(document).ready(function($) {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
start: function(event, ui) {
var clone = $(ui.item[0].outerHTML).clone();
},
placeholder: {
element: function(clone, ui) {
return $('<li class="fade">' + clone[0].innerHTML + '</li>');
},
update: function() {
return;
}
},
}).disableSelection();
});
#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;
}
.fade {
opacity: 0.5;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
</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>

Able to Drag but not Drop: jQuery Plug-in

I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?
There is an additional "/" in the relative address that you have defined. Remove it.
I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle

What does the #feedback selector reference in the JQueryUI demos

I'm looking specifically at the "Selectable" demos. Here is the example code for reference:
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>
None of the HTML contains an id of "feedback" and I've tried commenting the #feedback styling in and out, but I can't see a difference.
Thanks
I think is copy-paste of the example css code of the jQuery UI selectable. It is needed only for the third example Serialize look at the <p id="feedback">.
Demo code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>
It's only used in the third demo...
In the serialize demo, if you check devtools, you'll see:
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

jQuery UI sortable items that I used for my page doesn't work?

I tried to put s sortable item as grid in my page but it appeared as just plain numbers, please tell me the reason.
<div class="demo">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</div>
and I pasted the script and style tags from jQuery like this in the head :
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
It seems that you are missing the CSS files. Make sure you have included the jquery-ui-x.x.x.css file. The sorting function is working fine, so it looks like a matter of presentation
I added the CSS from Google CDN and it looks fine now
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" />
You may also want to remove the float: left from your css so they appear as a list

Categories