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>
Related
Please tell me why the droppable function does not work on the added drop elements and how to solve this problem?
$(function() {
$(".drag").draggable({
start: function(event, ui) {
$(".to_drop").append('<div class="drop">New</div>');
},
stop: function(event, ui) {
},
});
$(".drop").droppable({
revert: "valid",
drop: function(event, ui) {
alert(1);
}
});
});
.drag {
width: 50px;
height: 50px;
background: blue;
}
.drop {
width: 100px;
height: 100px;
border: 1px solid;
}
<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="drag"></div>
<div class="to_drop">
<div class="drop">Old</div>
</div>
When you run $(".drop").droppable the new .drop doesn't exist yet. You can just re-run after creating the new div on just the new div:
$(function() {
$(".drag").draggable({
start: function(event, ui) {
const $dropper = $($.parseHTML('<div class="drop">New</div>'))
$(".to_drop").append($dropper);
$dropper.droppable({
revert: "valid",
drop: function(event, ui) {
alert(1);
}
});
},
stop: function(event, ui) {
},
});
$(".drop").droppable({
revert: "valid",
drop: function(event, ui) {
alert(1);
}
});
});
.drag {
width: 50px;
height: 50px;
background: blue;
}
.drop {
width: 100px;
height: 100px;
border: 1px solid;
}
<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="drag"></div>
<div class="to_drop">
<div class="drop">Old</div>
</div>
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>
I am not good at jquery.. I want to change the droppable image when I drag and drop inside the droppable.. how do I change it? I need the droppable image to change when it is droppable inside the draoppable box. Please help!
jsFiddle
https://jsfiddle.net/xInfinityMing/9vmw4mtc/6/
HTML:
<div id="dragIcons">
<img width="100px" height="100px" src="assets/img/gebiz.png">
<img width="100px" height="100px" src="assets/img/b2b.png">
<img width="100px" height="100px" src="assets/img/pitches.png">
<img width="100px" height="100px" src="assets/img/creative.png">
</div>
<div id="briefcase">
<div id="briefcase-droppable">
</div>
</div>
CSS:
.draggable
{
filter: alpha(opacity=100);
opacity: 1.0;
z-index: 100;
transition: none !important;
animation: pulse 0.4s alternate infinite;
}
.end-draggable
{
animation: 0;
}
.dropped
{
position: static !important;
transition: none !important;
animation: 0;
}
#dragIcons
{
padding: 5px;
min-height: 100px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#briefcase
{
height: 485px;
width: 600px;
margin-left: 300px;
background: url("../../../assets/img/folder.png");
background-position:
background-repeat: no-repeat;
position: absolute;
}
#briefcase-open
{
height: 485px;
width: 600px;
margin-left: 300px;
background: url("../../../assets/img/folder-open.png");
background-position:
background-repeat: no-repeat;
position: absolute;
}
#briefcase-droppable
{
border-style: solid;
height: 285px;
width: 450px;
margin-left: 80px;
margin-top: 110px;
}
#keyframes pulse {
100% {
transform: scale(1.1);
}
}
** JS: **
$(function () {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-droppable").droppable({
drop: function (event, ui) {
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
You can do it in the drop event you can get the draggable element like this ui.draggable so to change your image source for example you should do
ui.draggable.attr('src','Your new source Here');
Demo : https://jsfiddle.net/9vmw4mtc/8/
js:
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-droppable").droppable({
drop: function(event, ui) {
ui.draggable.attr('src','https://image.freepik.com/free-icon/double-up-arrow-angles_318-53141.png');
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
Update:
If you want to change the background image of the droppable element you also will make it in drop event but you will get the droppable element using $(this)
$(this).parent().css('background-image','your new background here');
Updated demo : https://jsfiddle.net/9vmw4mtc/9/
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-droppable").droppable({
drop: function(event, ui) {
$(this).parent().css('background-image','url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")');
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>
I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.ch{
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch");
$(droppedElement).draggable({containment:
"dropArea"});
droppedElement.appendTo('#dropArea');
}
});
});
</script>
</body>
</html>
I am trying to make one div droppable and resizable, it works great in Chrome, but not in Firefox.
Here is my jsFiddle please open this in the Firefox:
MY DEMO
My code:
// main drop function for work area
$('#img-drop-container').droppable({
accept: '.img-drop',
drop: function(event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '#img-drop-container',
stack: '.inside-drop-zone',
zIndex: 100,
cursor: 'pointer'
}));
$clone.removeClass('img-drop');
// resize image
// $('.inside-drop-zone').resizable({
// aspectRatio: true,
// handles: 'ne, se, sw, nw'
// });
}
}
});
//clone the draggable items
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
});
ul {
list-style:none;
}
#img-drop-container {
background-color:#d8d8d8;
border: 1px solid #9C9898;
height:557px;
width:99.9%;
}
.img-drop {
height: 120px;
width: auto;
}
#trash {
float:left;
margin-left:20px;
margin-top:20px;
}
#trash {
width:140px;
height:140px;
background-repeat: no-repeat;
background-position:center center;
z-index:2;
}
img {
width:auto;
height:auto;
}
.store-thumb {
height: 50px;
width: 50px;
}
#imgbg {
float: right;
left: -2%;
position: relative;
top: 4%;
}
.column {
margin-top: -21%;
margin-left:55%;
}
.resizable {
width: 100px;
border: 1px solid #bb0000;
}
.resizable img {
width: 100%;
}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ul id="carousel" class="elastislide-list">
<li>
<div class="img-drop">
<div style='resize: horizontal; height:20px; width: 100px; overflow: auto; border: solid gray 1px;float:left; background-color: green;'></div>
</div>
</li>
</ul>
<div id="img-drop-container"></div>
Fiddle: http://jsfiddle.net/c38WX/40/
HTML:
only one div in li
<div class="img-drop" style='height:20px; width: 100px; overflow: hidden; border: solid gray 1px;float:left; background-color: green;'></div>
JQ:
add resizible widget
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
}).resizable({
handles: "e" ,
autoHide: true
});
Here's a working Fiddle, perhaps not perfectly as I'm not exactly sure what the functionality should be.
JSFiddle
Instead of using resize:horizontal, I'm using jQuery UI's resize (as it looks like you also tried) to hande the resize functionality. handles: 'e, w' is what restricts the resize to horizontal only.
// resize image
$('.resize_box').resizable({
handles: 'e, w'
});