sort parents vertically and child horizontally

sort parents vertically and child horizontally - javascript

sortable on part works fine - single are sorted horizontally.
Why parent is not sortable - to sort part vertically ?
$('.parent').sortable({
items: ".part",
containment: "parent",
tolerance: "pointer",
axis: "y",
});
$('.part').sortable({
containment: "parent",
tolerance: "pointer",
axis: "x",
});
.parent{
background:silver;
position:fixed;
width:90%;
left:5%;
height:50px;
overflow-y:scroll;
}
.part{
background:lightgreen;
margin:5px;
display:grid;
grid-template-columns:50% 50%;
}
.single{
background:gold;
cursor:cell;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='parent'>
<div class='part'>
<div class='single'>lorem1</div>
<div class='single'>ipsum1</div>
</div>
<div class='part'>
<div class='single'>lorem2</div>
<div class='single'>ipsum2</div>
</div>
</div>

The primary issue is that there is no place to click on $(".part") without clicking on $(".single"). The target of the sort event is then the part and not the parent.
I would advise either a handle, or some amount of padding.
$(function() {
$('.parent').sortable({
items: "> .part",
containment: "parent",
tolerance: "pointer",
axis: "y",
});
$('.part').sortable({
containment: "parent",
items: "> .single",
tolerance: "pointer",
axis: "x",
});
});
.parent {
background: silver;
position: fixed;
width: 90%;
left: 5%;
height: 50px;
overflow-y: scroll;
}
.part {
background: lightgreen;
margin: 5px;
padding-left: 16px;
display: grid;
grid-template-columns: 50% 50%;
}
.single {
background: gold;
cursor: cell;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='parent'>
<div class='part'>
<div class='single'>lorem1</div>
<div class='single'>ipsum1</div>
</div>
<div class='part'>
<div class='single'>lorem2</div>
<div class='single'>ipsum2</div>
</div>
</div>
By adding some padding, 16px worth on the left, I now have a defined space I can grab a Part without grabbing a single, and I can sort it as expected. items may not be needed, but it does clarify things when reviewing the code.
Hope that helps.

Related

jqueryUI, accept if 'drop to' container meets requirements

the JqueryUi documentation mentions that there is a way to check if element that user 'drag and drop' meets the requiremments by using:
accept: function(el) {
return CHECK_REQUIREMENTS;
}
but how is it possible to check if the target element (the container the user is trying to place the item into) that meets some criteria?
My code is:
<html>
<head>
<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>
<style>
* * {
box-sizing: border-box;
}
.search-container {
display: flex;
flex-wrap: wrap;
width: 33%;
min-height: 200px;
border: 1px solid red;
}
.search-item {
border: 1px solid grey;
text-align: center;
margin: 5px;
width: 150px;
max-width: 300px;
flex-basis: 150px;
flex-grow: 1;
height: 80px;
}
</style>
</head>
<body>
<div id="myContainer">
<div id="firstContainer" class="search-container acceptableContainer" style="float:left">
<div class="search-item acceptable">first</div>
<div class="search-item acceptable">two</div>
<div class="search-item acceptable">three</div>
<div class="search-item acceptable">four</div>
<div class="search-item acceptable">five</div>
<div class="search-item">six</div>
<div class="search-item">seven</div>
<div class="search-item">eight</div>
<div class="search-item">nine</div>
</div>
<div id="secondContainer" class="search-container" style="float:left">
</div>
<div id="thirdContainer" class="search-container acceptableContainer">
</div>
</div>
</body>
<script>
$(".search-item").draggable({
revert: 'invalid'
});
$(".search-container").droppable({
accept: function(el) {
return el.hasClass('acceptable');
},
drop: function( event, ui ) {
var droppable = $(this);
var draggable = ui.draggable;
draggable.appendTo(droppable);
draggable.css({top: '0px', left: '0px'});
}
});
</script>
</html>
So this code checks if 'drag and drop' has class acceptable.
For example, I would like to check if target container has class acceptableContainer and accept the operation only if it returns true (so secondContainer can not be target container).
How is it posisble to deal with that?

Inside .drop event, you check the condition and if met, then proceed with the operation like appending to new location etc. Also modify css properties to match positioning in new location, and if conditions are not met, set the 'revert' option of draggable to 'true',
Below part might not be necessary I got mixed results
[then reset it to 'invalid' inside .stop event of draggable. Key is .stop of draggable is called after .drop of droppable.]
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Droppable </title>
<link rel="stylesheet" href="jquerylib/jquery-ui.css" />
<script src="jquerylib/jquery.js"></script>
<script src="jquerylib/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="css/styles.css" />-->
<style>
.boxMain {
width: 40%;
height: 400px;
background-color: yellow;
border: 3px solid black;
color: black;
margin: 0px auto;
/*padding: 15% 15% 0% 15%;*/
float: left;
}
.box {
width: 100px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
border-radius: 15px;
color: white;
margin: 5px;
z-index: 99;
float: left;
/*position: absolute;*/
}
</style>
<!--<script src="script/02droppable.js"></script>-->
<script>
$(document).ready(function () {
$(".box").draggable({
revert: "invalid",
stop: function () {
console.log("stopped");
$(this).draggable("option", "revert", "invalid");
}
});
$(".boxMain").droppable({
accept: ".box",
drop: function (e, u) {
console.log("dropped");
if ($(this).hasClass("AcceptingBox")) {
u.draggable.appendTo($(this));
u.draggable.css({
"left": 0,
"top": 0
});
} else {
console.log("No");
u.draggable.draggable("option", "revert", true);
}
}
});
});
</script>
</head>
<body>
<div style="height:200px;">
<div id="sub1" class="box" style="background: red"></div>
<div id="sub2" class="box" style="background: green"></div>
<div id="sub3" class="box" style="background: blue"><p>Click</p></div>
<div id="sub4" class="box" style="background: aqua"><p>Click</p></div>
</div>
<div id="main1" class="boxMain AcceptingBox">Accepting</div>
<div id="main2" class="boxMain"></div>
<!--<div id="main2" class="boxMain"></div>-->
</body>
</html>

Consider the following.
$(function() {
$(".search-item").draggable({
revert: 'valid'
});
$(".search-container").droppable({
accept: '.acceptable',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
if (droppable.hasClass("acceptableContainer")) {
draggable.appendTo(droppable);
draggable.css({
top: '0px',
left: '0px'
});
} else {
return false;
}
}
});
});
* * {
box-sizing: border-box;
}
.search-container {
display: flex;
flex-wrap: wrap;
width: 33%;
min-height: 200px;
border: 1px solid red;
}
.search-item {
border: 1px solid grey;
text-align: center;
margin: 5px;
width: 150px;
max-width: 300px;
flex-basis: 150px;
flex-grow: 1;
height: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="myContainer">
<div id="firstContainer" class="search-container acceptableContainer" style="float:left">
<div class="search-item acceptable">first</div>
<div class="search-item acceptable">two</div>
<div class="search-item acceptable">three</div>
<div class="search-item acceptable">four</div>
<div class="search-item acceptable">five</div>
<div class="search-item">six</div>
<div class="search-item">seven</div>
<div class="search-item">eight</div>
<div class="search-item">nine</div>
</div>
<div id="secondContainer" class="search-container" style="float:left">
</div>
<div id="thirdContainer" class="search-container acceptableContainer">
</div>
</div>
You will need to return a false to invoke the revert upon drop. It's sort of backward logic.

How to use jquery droppable to drop element at specific position?

I try to make an editor with a sidebar. to drag components from the sidebar to the editor area.
But, I had some problems. the most critical one is.
to sort dropped component at a specific position into the editor area for example or in other words I need to drag and drop component 1 and component 2 and then component 3 between 1 and 2.
I used for that jquery sortable function.
Error:
I get no sort for the dropped component, moreover, if I try to sort
the dropped components later, I get components cloned inside the
editor area rather than get it sorted
here is my attempt
$( function() {
$("#side").resizable().draggable();
$("#editor")
.sortable().disableSelection().droppable({
accept: ".component",
drop: function(event, ui)
{ $(this).append(ui.draggable.clone()); }
});
$(".component")
.mousedown
(function(){ $(this).css('cursor','grabbing'); })
.draggable
({ helper: "clone" });
});
#editor, #side, .component{padding: 10px;}
#editor {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#9999;
z-index: -1;
text-align: right;
cursor: default;
}
#side{
position: fixed;
top:0;
left:0;
width:300px;
height: 100vh;
background:red;
color:yellow;
cursor: move;
}
.component{
background-color:blue;
width: 80px;
height: 50px;
margin:20px;
display: inline-block;
}
.component:hover{
cursor:grab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="side">
<h3 id="title">I'm resizable and draggable</h3>
<div class="component">
I'm droppable 1
</div>
<div class="component">
I'm droppable 2
</div>
<div class="component">
I'm droppable 3
</div>
<div class="component">
I'm droppable 4
</div>
</div>
<div id="editor" contenteditable="true">
<h3 id="title">I'm editable</h3>
</div>

Consider using connectToSortable with your Draggable. See the following example.
$(function() {
$("#side").resizable().draggable();
$("#editor")
.sortable({
items: "div.component"
}).disableSelection();
$(".component")
.mousedown(function() {
$(this).css('cursor', 'grabbing');
})
.draggable({
helper: "clone",
connectToSortable: "#editor"
});
});
#editor,
#side,
.component {
padding: 10px;
}
#editor {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #9999;
z-index: -1;
text-align: right;
cursor: default;
}
#side {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: red;
color: yellow;
cursor: move;
}
.component {
background-color: blue;
width: 80px;
height: 50px;
margin: 20px;
display: inline-block;
}
.component:hover {
cursor: grab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="side">
<h3 id="title">I'm resizable and draggable</h3>
<div class="component">
I'm droppable 1
</div>
<div class="component">
I'm droppable 2
</div>
<div class="component">
I'm droppable 3
</div>
<div class="component">
I'm droppable 4
</div>
</div>
<div id="editor" contenteditable="true">
<h3 id="title">I'm editable</h3>
</div>
The cloned items are then dropped directly into the Sortable.

Gridstack: Dragging widget from one grid into another, nested one

I am trying to create this behavior and not sure whether Gridstack supports it or not. I have 3 Gridstack grids: Grid1, Grid2, and Grid3. Grid1 is a standalone grid and Grid3 is nested inside Grid2. I need to be able to drag widgets from Grid1 both into Grid2 (outer grid) and into Grid3 (nested grid). Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported - any pointers are appreciated.
NB: Expand the snippet to full screen
$(document).ready(function() {
$('.grid-stack').gridstack();
});
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
background: lightpink;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>
<div class="container-fluid">
<h1> Multilevel Nested grids demo</h1>
<div class="grid-stack" id="container-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content">
<span>Grid One</span>
<div class="grid-stack" id="grid-one">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">1</div>
</div>
<div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">2</div>
</div>
</div>
</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="8" data-gs-height="4">
<div class="grid-stack-item-content">
<span>Grid Two</span>
<div class="grid-stack" id="grid-two">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">3</div>
</div>
<div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">4</div>
</div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="3">
<div class="grid-stack-item-content">
<span>Grid Three</span>
<div class="grid-stack" id="grid-three">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="1">
<div class="grid-stack-item-content">5</div>
</div>
<div class="grid-stack-item widget" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="1">
<div class="grid-stack-item-content">6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported
Sad but true, that's not possible. At least, not with gridstack.
The key behind this dragging mechanism is accomplished by the acceptWidgets option. But this can't handle multilevel .grid-stack element. Hence, error appears.
You can try to modify the script added in the snippet to something like this:
$("#container-stack").gridstack({
acceptWidgets: '.grid-stack-item'
})
But sadly, this will cause error once you start dragging any widget. But it works with single level nesting, which is not definitely what you are looking for.
The documentation also does not indicate anything at all regarding the nested level dragging.
But the reason I am assuming this isn't possible is this issue, also this one.
I guess this is (almost) exactly what you wanted. but there is no response from any officials. Also, it's three years old. Another flaw that indicates this project is dying is when you try to access some of their files such as the script, you get a security warning, which prevented me to add this snippet for a while.
Therefore, if I were you I would go for jqueryUI and custom code this.
Update
Here is a snippet of something similar to what you expected I guess, let me know if this is right, then I will improve this once again, like adding resizing, snap to sibling widgets and a few more things:
Once again, check the snippet in fullscreen mode.
$("#gridThree").draggable({
snap: '#gridTwo',
snapMode: 'inner',
zIndex: 5,
containment: 'parent'
});
$(".widgetInOne, .widgetInTwo, .widgetInThree").draggable({
snap: '#gridOne, #gridTwo, #gridThree',
snapMode: 'inner',
zIndex: false,
stack: 'div',
cursor: 'grab',
// grid: [ 100, 100 ]
});
$("#gridOne, #gridTwo, #gridThree").droppable({
accept: '.widgetInOne, .widgetInTwo, .widgetInThree',
drop: function(event, ui) {
if ($(event.target).find($(event.toElement)).length == 0) {
$(event.toElement).css({
'left': '',
top: ''
});
$(event.target).append($(event.toElement));
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#gridOne {
background: #cecece;
width: 40%;
height: 400px;
display: inline-block;
margin-right: 4%;
vertical-align: top;
}
.widgetInOne,
.widgetInTwo,
.widgetInThree {
width: 100px;
height: 100px;
padding: 0.5em;
}
#gridTwo {
background: #bfe9f3;
width: 50%;
height: 400px;
display: inline-block;
margin-left: 4%;
vertical-align: top;
position: relative;
}
#gridThree {
background: #ffdda9;
width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
position: absolute;
right: 100px;
top: 0;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.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>
<div id="gridOne">
<div class="ui-widget-content widgetInOne">
<p>One</p>
</div>
</div>
<div id="gridTwo">
<div class="ui-widget-content widgetInTwo">
<p>Two</p>
</div>
<div id="gridThree">
<div class="ui-widget-content widgetInThree">
<p>Three</p>
</div>
</div>
</div>
A Few Notable things here:
When you drag a widget into a grid, the widget element actually moves in that grid (in the DOM structure), so any parent dependent css selector might not work here. only apply css with the widget class.
For now the widgets only snaps to the grid inner edges (not to the outer side of other widgets), to find more check: here I couldn't find any other option but to use // grid: [ 100, 100 ] for this one.
Resizable option is not added here yet, hope you can tweak it as you need

This is code from an old drag/drop fiddle I composed (an age ago!), with areas that are both draggable and droppable. The items that can be pulled across to either of the droppable areas can be dragged again from one area to another and dragged up and down. While the items are not sized the same as are in your example, it goes to show that the same user experience can be achieved by using simply jquery/jquery-ui without sticking to gridstack. You may save yourself some laborious hours by working outside the grid! ;)
Hope this helps
fiddle
$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());
$(".card").draggable({
appendTo: "#launchPad",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$("#launchPad").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$("#launchPad").append($(ui.draggable));
}
});
$(".stackDrop1").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop2").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
body {
margin: 0;
}
#launchPad {
width: 200px;
float: left;
border: 1px solid #eaeaea;
background-color: #f5f5f5;
}
#dropZone {
float: right;
border: 1px solid #eaeaea;
background-color: #ffffcc;
}
.card {
width: 150px;
padding: 5px 10px;
margin: 5px;
border: 1px solid #ccc;
background-color: #eaeaea;
}
.stack {
width: 180px;
border: 1px solid #ccc;
background-color: #f5f5f5;
margin: 20px;
}
.stackHdr {
background-color: #eaeaea;
border: 1px solid #fff;
padding: 5px
}
.stackDrop1,
.stackDrop2 {
min-height: 100px;
padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="launchPad">
<div class="card draggable">
apple
</div>
<div class="card draggable">
orange
</div>
<div class="card draggable">
banana
</div>
<div class="card draggable">
car
</div>
<div class="card draggable">
bus
</div>
</div>
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Drop here
</div>
<div class="stackDrop1 droppable">
</div>
</div>
<div class="stack">
<div class="stackHdr">
Or here
</div>
<div class="stackDrop2 droppable">
</div>
</div>
</div>

I create fork which solves the problem of nested grids.

How to restrict draggable element into particular element

In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE

You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.

$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

jQuery UI Drag/Droppable animation issue

I'm trying to use jQuery Ui for sorting some Items with Drag and Drop.
If one element passes the dropzone, the dropzone should expand. This works good. But my problem is that the attribute of event.target.clientWidth is still 25. So the dropzone is still 25px, while the container is allready 250px.
I dont know how to change it (i allready tried event.target.clientWidth = 250 but this doesnt work) and hoped you could maybe help me
This is a part of my code:
Html:
<section id="plot" class="plot">
<div class="cards">
<div id="card__container" class="card__container" style="width: 1392px;">
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card1">
<span class="card__id">1</span>
<span class="card__text">Hektor runs away followed by police</span>
</div>
</div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card2">
<span class="card__id">2</span>
<span class="card__text">Hektor stumbles and falls</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card3">
<span class="card__id">3</span>
<span class="card__text">Hektor get catched by police and trys to bluff hisself out</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card5">
<span class="card__id">5</span>
<span class="card__text">Hektor did say something stupid</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card4">
<span class="card__id">4</span>
<span class="card__text">Police a bit confused and believes him</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card6">
<span class="card__id">6</span>
<span class="card__text">Police arrested him</span>
</div>
</div>
</div>
</div>
</section>
Css:
.card {
cursor: pointer;
}
.plot {
overflow-y: hidden;
overflow-x: visible;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100vw;
padding-top: 25%;
}
.cards {
position: relative;
left: 0;
right: 0;
margin: auto;
}
.card__container {
left:0;
right: 0;
margin: 25px auto;
height: 100%;
display: table;
}
.card {
margin-top: 50px;
width: 200px;
height: 150px;
border: 1px solid #d3d3d3;
display: table-cell;
}
.card__dropzone--inner {
width: 25px;
height: 150px;
}
.card__id {
font-size: 1.5em;
font-weight: bold;
display: block;
padding: 10px;
}
.card__text {
display: block;
padding: 10px;
font-family: sans-serif;
}
.card__dropzone {
display: table-cell;
vertical-align: top;
}
.card__dropzone--active {
background: blue;
box-shadow: 0 0 10px blue;
}
Javascript:
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
event.target.clientWidth = 250;
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
event.target.clientWidth = 25;
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
And this is my jsfiddle
http://jsfiddle.net/qthrvt8s/

You have to add refreshPositions: true while initializing .draggable() to tell your droppable area to take new dimensions in account :
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
refreshPositions: true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
Please see the updated fiddle

We Keep Coding

JavaScript is the programming language of the Web.

sort parents vertically and child horizontally - javascript

Related

jqueryUI, accept if 'drop to' container meets requirements

How to use jquery droppable to drop element at specific position?

Gridstack: Dragging widget from one grid into another, nested one

How to restrict draggable element into particular element

jQuery UI Drag/Droppable animation issue

Categories

Resources