Scrolling div inside a div appear over div with higher z-index - javascript

https://jsfiddle.net/09rcqwdf/1/
The sidebar has a higher z-index. The container .main has overflow: none, the div inside it has overflow: scroll but for some reason when you drag the text it thinks its over the .scrolling div when in fact its over the sidebar div.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

First thing I noticed is your helper callback was configured incorrectly, you had:
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {
},
Since you're defining an Object, you need to have the keyname, a colon, and then the function. Example:
$('.drag').draggable({
helper: function() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start: () => {
},
This may have been causing various initialization issues for your draggable and I am surprised it did not appear as an error in your console.
In regards to the drag action, I think this will also be cleared up by the correction.
https://jsfiddle.net/Twisty/3gn57quj/10/
JavaScript
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
$(this).append(ui.helper.clone().css({
left: (ui.offset.left - $(".sidebar").width()) + "px",
top: ui.offset.top + "px"
}));
},
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
});

Regarding the z-index issue, I believe You can either
set in Your CSS:
.scrolling {
background-color: transparent;
}
and use the background-color of the scroll-container
or simply raise a little bit the z-index of the draggable
(preferred solution):
.drag {
z-index: 10;
}
or maybe set the inline style in Your helper function:
return $('<div style="z-index: 10;">', {
Finally, I believe You don't even need to raise so much the z-index of the sidebar, You can quietly avoid that
z-index: 100000
I strongly believe You may need also to change: ui.helper[0].remove(); to: ui.helper.remove();
As a bonus, to correctly position the draggable I believe the simplest solution will be to get the scroll position of the closest scrollable container:
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop: function(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
var container = $(event.target).scrollParent();
$(this).append(ui.helper.clone().css({
left: (ui.offset.left + container.scrollLeft()- $(".sidebar").width()) + "px",
top: (ui.offset.top + container.scrollTop()) + "px"
}));
}
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop: function(event, ui) {
ui.helper.remove();
},
cursorAt: {left: 0, top: 5},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid'
});
});
Moreover, please note: Twisty's remark is correct, in latest Firefox and Chrome Your snippet works, but a brief test in some other browsers raises below error:
Expected: ':'

It does not think it’s over the .scrolling div. It it just that the .scrolling div is transparent and you can see “through” it. To see what I am saying, add a background color to your .scrolling div, which will prevent you to see what is happening behind it.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px;
background: orange; <!-- Background Color to prevent transparency -->
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

I suppose you want to restrict the dragging between the sidebar only.
For that you need to provide option for containment in draggable function. Which will block the movement of drag.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
containment: ".sidebar",
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

Related

how to fix setTimeout gets faster after new tab

i have a question.
I want to make an animation that changes the background images while using the TweenMax slide.
It works, however open a new browser tab and see that it slows down or faster code when you come back.
I think it's a matter of setTimeout and tweenmax repeat-1.
Here is code.
Can tweenmax be executed within a function?
please help me.
var rollImg = ["https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=",
"https://cdn.leroymerlin.com.br/products/letra_b_11cm_acrilico_preto_kami_acrilicos_89622526_0001_600x600.jpg"];
var layer1Interval = 4000;
var layer2Interval = 5000;
var animationInterval = 1000;
$(function() {
var roll = 1;
function rollFnc () {
setTimeout(function() {
roll++;
if (roll > 2) {
roll = 1;
}
$("#box1").attr("src", rollImg[roll - 1]);
setTimeout(rollFnc, layer1Interval + animationInterval * 1.5);
}, animationInterval / 2);
}
rollFnc();
})
var tl = new TimelineMax({
repeatDelay: (layer1Interval / 1000)
});
tl.from(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "left",
ease: 'expo.inOut'
});
tl.to(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "right",
ease: 'expo.out'
});
,
main {
position: relative;
width: 100%;
}
.box1 {
width: 40.4%;
position: absolute;
top: 3.7%;
left: 15%;
}
.box1 img {
width: 100%;
}
.box2 {
width: 19.9%;
position: absolute;
top: 3.7%;
left: 56.8%;
}
.box2 img {
width: 100%;
}
.layer1 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.layer2 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>
<body>
<div class="main">
<div class="box1">
<div class="layer1" id="layer1"></div>
<img id="box1" src="https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=" alt="">
</div>
</div>
</body>
</html>

Overlay closeable by a click outside

I'm trying to make a kind of window which pops up when a customer add a product to his/her cart. This is what it would look like : Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).
Using JS I added an event listener on #overlay-daddy which (is supposed to) set its display property to none. My problem is it also triggers an event when I click on #overlay. Thanks in advance !
Here's my code :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function() { alert(this); });
</script>
</body>
</html>
You need to stop the event from being propagated. Just add e.eventPropagation() in the event listener for overlay.
var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');
overlay.addEventListener("click", function(e) {
e.stopPropagation();
});
dad.addEventListener("click", function() {
alert(this);
});
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
Also register a click handler on #overlay where you preventDefault();
Off the top of my head, that could look like this:
document.getElementById('overlay').addEventListener('click', function(e) {
e.preventDefault();
e.cancelBubble();
e.stopPropagation();
}, true);
Note that you probably don't need all three calls but it's been a while and my memory isn't clear on which you really need.
In order to disable the click event in the overlay's children, you need to test if the clicked element is the overlay itself, and not one of its children, with if(event.target===this) :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function(event) {
if(event.target===this) alert(this);
});
</script>
</body>
</html>
The click event on your 'overlay' element is being propagated to its parent. You can add event.stopPropogation of your 'overlay' element.
You may modify your overlay element like below.
<div id="overlay" onclick="event.stopPropagation();">
</div>
I guess your code need bottom and right in #overlay-daddy
#overlay-daddy {
position: absolute;
z-index: 3; // edited
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; // added bottom
right: 0; // added right
}
So if you want to click in #overlay-daddy you need to set z-index for it greater than #overlay
I hope it can help you.

FullCalendar appears behind backdrop with higher z-index

I'm trying to make some events of FullCalendar appear in front of a backdrop that I have created but I'm unable to despite changing the z-index and I'm not sure why.
I have managed to get the whole calendar div in front of backdrop but I can't seem to target one event and set the z-index.
I don't have that much experience with modals and backdrops - did I miss out on a CSS property?
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
right: "prev,next"
},
slotDuration: "00:05:00",
slotLabelInterval: "00:15:00",
contentHeight: "auto",
defaultView: "agendaWeek",
eventDurationEditable: false,
allDaySlot: false,
eventLimit: true,
events: [{
title: "Test Entry",
start: "2017-12-18T01:00:00",
end: "2017-12-18T02:00:00"
}]
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#calendar {
width: 800px;
position: absolute;
}
.fc-event {
z-index: 20;
}
#backdrop {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
background-color: rgb(0, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>
Codepen: https://codepen.io/anon/pen/YYwrqq
This works, update how you desire:
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
right: "prev,next"
},
slotDuration: "00:05:00",
slotLabelInterval: "00:15:00",
contentHeight: "auto",
defaultView: "agendaWeek",
eventDurationEditable: false,
allDaySlot: false,
eventLimit: true,
events: [{
title: "Test Entry",
start: "2017-12-18T01:00:00",
end: "2017-12-18T02:00:00"
}]
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#backdrop {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
background-color: rgb(0, 0, 0);
}
#calendar {
width: 800px;
position: absolute;
z-index: 1;
}
.fc td,
.fc th {
background-color: rgba(0, 0, 0, .8) !important;
border: 1px solid rgba(0, 0, 0, .8) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>

How to Customize slide bar using CSS

I have created slider which appears on top of html page but i need it to appear at the bottom and also the horizontal slide bar
should be reduced to half of its size and also I want to limit the value from (0-100) to (min:1-max:25)
I am new to the css and I don't know how to do this can someone help me please.I have also uploaded the complete code.
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
<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>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
To set the minimum and maximum for the slider you would do this:
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1, //<--------Min
max: 25, //<-------Max
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
for the CSS, you could position it like this:
#slider {
width:50%; /*make it half its width*/
position:absolute; /*allow you to position it at the bottom*/
bottom:20px; /*how far from the bottom*/
left:20px; /* how far from the left*/
}
Demo: https://jsfiddle.net/3t0s597v/
Here you go, everything you need!
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1,
max: 25,
create: function() {
handle.text($(this).slider("value"))
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
#slider {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
<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>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>

jQuery UI: Reject draggable in partially overlaid droppable?

I have a large jQuery UI droppable that is overlaid by some other elements. When I hover a draggable over the elements that actually obscure the droppable, the droppable still receives the ui-state-hover class. How can we avoid that?
It seems there is no chance to implement the accept function of the droppable s.t. it decides by the cursor coordinates, at least I can't get it to work: If it returns false once, it won't be queried again until the cursor re-enters the obscured droppable.
Not sure there is a native way of doing it. But you can make the overlay elements droppable as well and on over and out disable and enable the 'real' droppable. Like this for example:
$('#droppable').droppable({
accept: '#draggable:not(.overObscure)',
greedy: true,
overlay: 'ha',
drop: function (e, ui) {
console.log(this)
}
});
$('#overlay').droppable({
accept: '#draggable',
over: function (e, ui) {
ui.draggable.addClass('overObscure');
},
out: function (e, ui) {
ui.draggable.removeClass('overObscure');
}
});
$('#draggable').draggable();
#droppable {
width: 300px;
height: 300px;
background-color: #ddd;
}
#overlay {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
}
#draggable {
width: 25px;
height: 25px;
background-color: yellow;
}
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>
You could also add the behavior to droppable so it's easier to call. Like this for example:
$.widget("ui.droppable", $.ui.droppable, {
_create: function () {
var that = this;
this._super();
$(this.options.overlay).droppable({
accept: this.options.accept,
over: function (e, ui) {
that.options.disabled = true;
},
out: function (e, ui) {
that.options.disabled = false;
}
});
}
})
$('#droppable').droppable({
accept: '#draggable',
greedy: true,
overlay: '#overlay',
drop: function (e, ui) {
console.log('dropped')
}
});
$('#draggable').draggable();
#droppable {
width: 300px;
height: 300px;
background-color: #ddd;
}
#overlay {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
}
#draggable {
width: 25px;
height: 25px;
background-color: yellow;
}
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>

Categories

Resources