Develop Reference

Function on created jquery droppable element

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>

How to prevent this transitionend event from running twice/multiple times?

I want to check when a transition ends, but it fires twice / multiple times, I want to check only one time when I click the element and call the function, and not again when remove the class, I tried with one(), stopPropagation() or even return false at the end of the function but it didn´t work, how achieve that?
Here is a example:
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function () {
val.removeClass("example")
}, 1500)
})
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>

$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition();
})
function checkEndTransition() {
var flag = true;
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
if(flag){
$.when($(this)).done(function() {
console.log("Finished");
var val = $(this);
setTimeout(function () {
val.removeClass("example");
}, 1500)
})
}
flag = false;
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
Your problem is $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() runs multiple time. You can use a flag to make it run only one time. Use above script and it will work.

It calls it three times because you are animating 3 elements - width, height, and background color. It calls "transitionend, webkitTransitionEnd ect." for each one when they finish.
To avoid this, instead of using transitions, use a keyframe object instead.
I also change the checkEndTransition() function to listen for animation end now instead of transition end...
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("animationEnd webkitAnimationEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function() {
val.removeClass("example")
}, 1500)
})
})
}
})
.main {
width: 170px;
height: 170px;
background-color: lightgrey;
}
.example {
animation: change 1 3s ease;
-webkit-animation: change 1 3s ease;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
#keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>

How to drag the element to outside when mCustomScrollbar is enabled

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/

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>

Resize on droppable is not working in Mozilla

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'
});