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>
Related
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);
}
});
});
Im dragging elements from one div to on other while dragging element is not visible
I used jquery mCustomScrollbar plugin to scroll
http://jsfiddle.net/jt1c8o81/
HTML Code
<table><tr>
<td><div id="ParentDiv" class="mCustomScrollbar _mCS_4 ui-sortable ui-droppable"></div></td>
<td><div style="border:1px solid blue;float:left;margin-top:0px;" class="drop">DROP HERE
</div></td></tr>
</table>
JQuery Code
for (var i = 0; i < 100; i++) {
var el = "<div class='childDiv draggable'>iData " + i + "</div>";
$("#ParentDiv").append(el);
}
$(".draggable").draggable({
containment: "window",
cursor: "crosshair",
revert: "invalid",
scroll: true,
stop: function (event, ui) {
if ($(this).hasClass("tsh")) {
$(this).attr("style", "");
}
},
drag: function (event, ui) {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
// $(this).text('x: ' + xPos + 'y: ' + yPos);
var shw_xy = 'x: ' + xPos + 'y: ' + yPos;
console.log(shw_xy);
}
});
$(".drop").droppable({
accept: ".draggable",
activeClass: "myhighlight",
drop: function (event, ui) {
$(this).removeClass("border").removeClass("over");
//$(this).addClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({
top: 0,
left: 0
}).appendTo(droppedOn);
},
over: function (event, elem) {
$(this).addClass("over");
$(this).removeClass("img_added");
var $this = $(this);
console.log("over");
},
activate: function (event, elem) {
}
});
CSS
#ParentDiv {
background-color: #ffffff;
border: 1px solid #e1d193;
border-radius: 4px;
float: left;
height: 600px;
margin-bottom: 10px;
margin-left: 15px;
min-height: 200px;
padding-bottom: 20px;
padding-left: 23px;
padding-top: 20px;
width: 252px;
}
#ParentDiv .childDiv {
border:1px solid red;
border-radius: 4px;
height: auto;
margin: 2px;
position: relative;
z-index: 5000;
}
#ParentDiv .childDiv {
float: left;
height: auto;
width: 70px;
}
.childDiv {
border:1px solid green;
border-radius: 4px;
height: auto;
margin: 2px;
position: relative;
z-index: 5000;
}
.childDiv {
float: left;
height: auto;
width: 70px;
margin:2px;
}
Can any one suggest me where im wrong
Please use helper:"clone" with appendTo function. Check below Code.
$(".element").draggable({
helper: function () { return $
(this).clone().appendTo(".element").css("zIndex",2).show();
}
});
I mentioned that containers with dragged elements has hidden overflow. That why you cant see elements on drag. Just set overfolow to visible on drag start and back to hidden on drags ends:
stop: function (event, ui) {
$(".mCustomScrollBox").attr("style", "overflow: hidden !important;");
$(".mCSB_container").attr("style", "overflow: hidden !important;");
},
start: function(event,ui){
$(".mCustomScrollBox ").attr("style", "overflow: visible !important;");
$(".mCSB_container").attr("style", "overflow: visible !important;");
},
see here how it works:
http://jsfiddle.net/jt1c8o81/19/
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>
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'
});