I facing problem, when i drag drop outer video div into timeline then it's not longer draggable
https://fiddle.jshell.net/surjitsidhu/pzmzc2z7/2/show/
https://fiddle.jshell.net/surjitsidhu/pzmzc2z7/2
I'm not sure, why it's freezing
Your code seems missing draggable.
See this code:
if( dropped.attr( 'id' ) === 'galleryItem' ) {
//alert("dropped if");
var newEl = $( dropped ).clone().appendTo( droppedOn );
newEl.removeAttr( 'id' ).removeClass( 'thumb' ).html( '<div style="background:red;width:400px;height:50px;"></div>' ).addClass( 'layer-item' );
newEl.removeClass( 'dragging' );
newEl.addClass("item");
$(".item").removeClass("ui-draggable draggable");
$(".item").draggable({
cursor: 'move',
});
} else {
//alert("dropped else");
$( dropped ).detach().css( { top: 0, left: ui.helper.position().left - 160 } ).appendTo( droppedOn );
}
Related
I try to drop dragged div into, for example, 3 div's.
I want to drop blue rectangle on 3 divs. When rectangle is dropped 3 div's have to change backgroud. I try to do this with draggable and droppable but it work only on to one element :(
$(function() {
$( ".event" ).draggable( {
grid: [ 5, 0 ],
containment: "parent"
}).resizable({
containment: "parent",
grid: [ 5, 0 ],
maxHeight: 40,
maxWidth: 1000,
minHeight: 40,
minWidth: 60,
handles: 'e, w',
resize: function( event, ui ) {
$( "#event" ).css("background-color", "blue");
}
});
$( ".eventPeriod" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
});
Any idea?
You change the tolerance of your droppable. Like this:
$( ".eventPeriod" ).droppable({
tolerance: 'touch',
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
Does anybody know how can I make jQuery UI tooltip to stay visible on hover. That is- I want it to stay visible when I move mouse from p element to tooltip.
Have tried on fiddle, but it seems there's a problem with :hover.
$("p").tooltip({
hide: {
effect: 'explode'
}
}).mouseleave(function () {
if ($('p').is(':hover')) {
ui.tooltip.preventDefault();
$('p').tooltip('open');
}
}).focusout(function () {
$('p').tooltip('close');
});
jsFiddle
That was a little tricky...
This script extends the standard jQuery UI 1.12.1, so that you get two extra options, allowing you to keep the tooltip open, while hover (the mouse stays on) it.
(function($) {
var uiTooltipTmp = {
options: {
hoverTimeout: 200,
tooltipHover: false // to have a regular behaviour by default. Use true to keep the tooltip while hovering it
},
// This function will check every "hoverTimeout" if the original object or it's tooltip is hovered. If not, it will continue the standard tooltip closure procedure.
timeoutHover: function (event,target,tooltipData,obj){
var TO;
var hov=false, hov2=false;
if(target !== undefined) {
if(target.is(":hover")){
hov=true;}
}
if(tooltipData !== undefined) {
if($(tooltipData.tooltip).is(":hover")){
hov=true;}
}
if(target !== undefined || tooltipData !== undefined) {hov2=true;}
if(hov) {
TO = setTimeout(obj.timeoutHover,obj.options.hoverTimeout,event,target,tooltipData,obj);
}else{
target.data('hoverFinished',1);
clearTimeout(TO);
if(hov2){
obj.closing = false;
obj.close(event,true);}
}
},
// Changed standard procedure
close: function(event) {
var tooltip,
that = this,
target = $( event ? event.currentTarget : this.element ),
tooltipData = this._find( target );
if(that.options.tooltipHover && (target.data('hoverFinished')===undefined || target.data('hoverFinished') === 0)){
target.data('hoverFinished',0);
setTimeout(that.timeoutHover, that.options.hoverTimeout,event, target, tooltipData, that);
}
else
{
if(that.options.tooltipHover){
target.data('hoverFinished',0);}
// The rest part of standard code is unchanged
if ( !tooltipData ) {
target.removeData( "ui-tooltip-open" );
return;
}
tooltip = tooltipData.tooltip;
if ( tooltipData.closing ) {
return;
}
clearInterval( this.delayedShow );
if ( target.data( "ui-tooltip-title" ) && !target.attr( "title" ) ) {
target.attr( "title", target.data( "ui-tooltip-title" ) );
}
this._removeDescribedBy( target );
tooltipData.hiding = true;
tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() {
that._removeTooltip( $( this ) );
} );
target.removeData( "ui-tooltip-open" );
this._off( target, "mouseleave focusout keyup" );
if ( target[ 0 ] !== this.element[ 0 ] ) {
this._off( target, "remove" );
}
this._off( this.document, "mousemove" );
if ( event && event.type === "mouseleave" ) {
$.each( this.parents, function( id, parent ) {
$( parent.element ).attr( "title", parent.title );
delete that.parents[ id ];
} );
}
tooltipData.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
if ( !tooltipData.hiding ) {
tooltipData.closing = false;
}
}
}
};
// Extending ui.tooltip. Changing "close" function and adding two new parameters.
$.widget( "ui.tooltip", $.ui.tooltip, uiTooltipTmp);
})(jQuery);
jQuery(document).ready(function($) {
$("h3").tooltip({hoverTimeout: 250, tooltipHover: true});
});
body {
background-color: #f3f3f3;
}
h3 {
display: inline-block;
margin: 1em 0 0 1em;
padding: 1em;
background-color: #FF7E6B;
color: #fff;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div>
<h3 title="I'll be here while you are hovering me or my creator.">
Hover me</h3>
</div>
$('[data-toggle="popover"]').popover({ trigger: "manual" }).on(
{
mouseenter: function () {
var $this = $(this);
$this.popover("show");
$(".popover").on("mouseleave", function () {
$this.popover('hide');
});
},
mouseleave: function () {
var $this = $(this);
setTimeout(function () {
if (!$(".popover:hover").length) {
$this.popover("hide");
}
}, 350);
}
});
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span type="button" role="button" class="glyphicon glyphicon-question-sign" data-toggle="popover" data-trigger="hover" data-placement="auto" data-html="true" data-content="For instance enter a link here <a href='https://google.com' target='_blank'>Almost know everything</a>"></span>
I'm trying to create a situation where it is possible to drag and clone a div inside another div multiple times, this div in the specific container has tot be sortable with the other ones.
$(function() {
$( ".drag" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day " ).droppable({
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
console.log(this.id)
}
}).sortable({
items: "div",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
This is working in this fiddle:
http://jsfiddle.net/mfUCe/
This is where i got stuck:
I want to be able to drag the 2 divs in to the divs that are already inside of the droppable containers.
it would be great if anybody could help me
I am using this snippet of code for my jQueryUI Autocomplete function on my site,
$( "#find" ).autocomplete({
minLength: 1,
source: function(request, response) {
var results = $.ui.autocomplete.filter(locations, request.term);
response(results.slice(0, 10));
},
focus: function( event, ui ) {
$( "#find" ).val( ui.item.value );
return false;
},
appendTo: "#results",
open: function(){
var position = $("#results").position(),
left = position.left, top = position.top;
$("#results > ul").css({left: (left + 15) + "px",
top: (top + 30) + "px", width: (206) + "px" });
},
select: function( event, ui ) {
$( "#find" ).val( ui.item.value );
$(":header.title").html(ui.item.value);
var new_url = ui.item.href; // instead of adding 'statistics', by using location.hash, it wont be necessary unlike using pushState()
location.hash = new_url;
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br />" + item.desc + "</a>" )
.appendTo( ul );
};
Actually this works perfectly fine on Firefox and Chrome, it behaves just like what it exactly behaves on the sample given here, I just merely copied and modified it according to what I wanted. But on IE9, the item.desc which shows up on other browsers is not visible on IE9. I think the code to start with fixing is the last part, the part which appends the suggestions of the autocomplete. Can someone help me out here? Cheers!
You need to upgrade bgiframe.min.js to a later version (3.0 works fine)
https://github.com/brandonaaron/bgiframe
Create a new css class to override the existing jquery ui autocomplete "position":"absolute"
.ui-autocompelte{
"position": "absolute"
....
....
}
New CSS Class
.ui-autocomplete-ie9-fix { position: relative !important; }
and apply this css class after
$("#find").autocompelte({
........
.......
});
if (!$.browser.msie || ($.browser.msie && $.browser.version != 9)) {
$("ul.ui-autocomplete").addClass("ui-autocomplete-ie9-fix");
}
Add below tag after head tag
<meta http-equiv="X-UA-Compatible" content="IE=8" />
As you can see here: http://jsfiddle.net/rA4CB/6/
When I make the drop in the overlapped area it is received in both droppables, greedy doesn't work when the items are siblings. Is there any way to block the reception on droppables lower in the zIndex?
BTW, mouseOver won't fire for the droppable element as the mouse is actually over the draggable element.
relevant JS:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Okay, so I spend an hour trying to figure it out, then as soon as I ask I then find my answer
http://jsfiddle.net/rA4CB/7/
Modified the JS to the following:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function(event, ui){
$( "#droppable" ).droppable( "disable" )
},
out: function(event, ui){
$( "#droppable" ).droppable( "enable" )
}
});
});
$( "#droppable" ).droppable({
greedy: true,
drop: function( event, ui ) {
if(ui.helper.is(".dropped")) {
return false;
}
ui.helper.addClass(".dropped");
}
});
Just set a css class on ui.helper of draggable. If the draggable has been accepted once, it will be refused by all other droppables (Could be done with the droppable "accept" parameter,too , like accept : ":not(.dropped)" and the class added to ui.draggable).
If you have a number of droppable in a container area then what????
You must re think for that problem. Greedy works for only parent to child relationship not in siblings. So you must edit droppable js or put your own logic for it.
So if you have a numbers of droppable then you must write some extra code to handle dropping on perfect droppable as it is in this example A number of siblings droppables
For making perfect siblings droppable modify your droppbale as below
var topElement = undefined;
var topElementArray = Array();
$( "#draggable" ).draggable();
$( ".droppableBox" ).droppable({
activeClass: "active-droppable",
tolerance:'pointer',
over: function( event, ui ) {
// This is for only show a message that z-index must be required for proppable
// you can remove it after testing or after development
if ($(this).css("z-index") == 'auto') {
alert("Please provide z-index for every droppable.");
return;
}
//
topElement = undefined;
topElementArray = Array();
// Change it as you want to write in your code
// For Container id or for your specific class for droppable or for both
$('#demo > .droppableBox').each(function(){
_left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
_top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {
topElementArray.push($(this).attr('id'));
}
});
},
drop: function( event, ui ) {
if (!topElement) {
topElement = determineTopElement(topElementArray);
}
if ($(this).attr('id') == $(topElement).attr('id')) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
// Your code after successful dropped element on specific siblings
// Start writing code for dropped element & perfect droppable
}
}
});
determineTopElement = function(_array) {
var topElement;
var zIndexHighest = 0;
for (i = 0; i < _array.length; i++){
var element = $("#"+ _array[i]);
var z_index = $(element).css("z-index");
if( z_index > zIndexHighest){
zIndexHighest = z_index;
topElement = element;
}
}
return topElement;
}
In certain circonstances :
myjQuery.droppable({
over:function(evt,ui){
ui.draggable.attr('drg_time', this.drg_time = evt.timeStamp)
},
accept:function(draggeds){
if(draggeds.attr('drg_time'))
{
return draggeds.attr('drg_time') == this.drg_time
}
return draggeds.hasClass('acceptable_classes_here')
},
out:function(evt,ui){
// useless but cleaner
ui.draggable.removeAttr('drg_time')
}
drop:...,
})
I had the same problem and made a small plugin :)
check it out:
https://stackoverflow.com/a/16720944/1308461
I find that using #invertedSpear's method will cause UI state change which is not desirable in some cases. Here is the code.
var lastOpertion = new Date().getTime();
drop: function (event, ui) {
if (new Date().getTime() - lastOpertion < 100) return;
lastOpertion = new Date().getTime();
....
}
So, when trying to find simple solution I came up with this (and it works for me):
window.overNowOnThis = "";
window.olderOnes = [];
$obj.droppable({
accept: ".draggable_imgs",
drop: function(e, ui) {
if(window.overNowOnThis == this){
// Do whatever
}
},
over: function(event, ui){
window.olderOnes.push(window.overNowOnThis);
window.overNowOnThis = this;
},
out: function(){
var lastElem = window.olderOnes.pop();
window.overNowOnThis = lastElem;
}
});
Top element would be selected because on it "over" fires the last one. Also - if there is more than two siblings - then when moving out of element we set the last one as current. Using global "window" was for example. Better option would be using classes as it can safely keep data.
It's very similar to invertedSpear answer. I had to change it a little bit because enabling/disabling inside "over"/"out" didn't work for me .I had to do below instead
$("#droppable2").droppable({
greedy: true,
drop: function (event, ui) {
$("droppable").droppable("disable");
}
}
I had to explicitly enable"droppable" div when I needed it. For instance, enable it when starting the drag event. Eg
$("#drageMe").draggable({
start:function(event,ui){
$("droppable").droppable("enable");
}
})
try greedy option in ui dropable. see the fiddle link below for demo:
http://jsfiddle.net/creators_guru/3vT5C/embedded/result/
$( ".circles" ).droppable({
greedy: true,
drop: function( event, ui ) {
$_data = ('drgged class = ' + ui.draggable.attr('class'));
$_data1 = ('droped id = #' + $(this).attr('id'));
$('#data').html($_data + '<br/>'+$_data1);
return false;
}
});