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.
Related
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.
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.
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>
HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs
Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/
I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
});
It doesn't show anything when I put it my code.
Add this css
<style>
img {
float: left;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#img1 {
background: #b00;
}
#img2 {
background: #c00;
}
#div1 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #077;
left: 10px;
}
#div2 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #0b0;
left: 10px;
}
br {
clear: both;
}
</style>
This js codes
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(e) {
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#img2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
And you HTML
<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>
It should work. Most probably you did not included jQuery library. I added it.
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
Using it should solve your porblem probably.