I am trying to combine select2(4.0.2) and mCustomScrollbar(3.1.13) libraries to have custom dropdown list with custom scrollbar.
Here is the code sample .
$(document).on("select2:open", "select", function() {
$('.select2-results').mCustomScrollbar({
mouseWheel: true,
advanced: {
updateOnContentResize: true
}
});
});
The main issue is mousewheel scrolling. It works only if you hold the cursor over the scrollbar itself.
mousewheel.js(3.1.3) included, but it seems not working properly. There is no event firing while scrolling over the dropdown list body.
Any ideas, how to fix it? Thanks in advance.
I had the same problem. I have fix it by this way:
$(".select2").on('select2:open', function (evt) {
$('.select2-results').mCustomScrollbar({
scrollButtons: {
enable: true
},
theme: "my-theme",
mouseWheel: true
});
$('#mCSB_1_scrollbar_vertical').css("pointer-events", "auto");
$('#mCSB_1_scrollbar_vertical').on("mousedown", function () { //cross-domain iframe mousewheel hack
$(this).css("pointer-events", "none");
})
})
and plus css
.select2-results .mCSB_scrollTools .mCSB_dragger{
margin-left: 96% !important;
width: 5px!important;
}
.select2-results #mCSB_1_scrollbar_vertical{
width: 100%!important;
}
.select2-results .mCSB_scrollTools .mCSB_draggerRail{
margin-left: 96%!important;
}
The other answer that was given is a bit of a hack, so I went a bit further into this and found out that select2 actually binds the mousewheel event to the result list and therefore the mousewheel event is fired on the ul element inside the .select2-results.
To fix it simply unbind the mousewheel on the ul element first:
$(".select2").on('select2:open', function (evt) {
// Unbind mousewheel event from select2 result lists
$(".select2-results ul.select2-results__options").unbind("mousewheel");
$('.select2-results').mCustomScrollbar();
});
Related
$("#source li").draggable({
appendTo: "#destination",
helper: "clone",
connectToSortable: "#destination",
containment: "document"
});
$("#destination").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "dragging-placeholder",
sort: function() {
$(this).removeClass("ui-state-default");
},
over: function() {
$(".placeholder").hide();
},
out: function() {
if ($(this).children(":not(.placeholder)").length === 0) {
$(".placeholder").show();
}
}
});
JSFiddle: http://jsfiddle.net/j9FK5/7/
When I drag a few boxes from the source UL to the target, they become very hard to sort, especially when trying to move to the beginning. Regular sorting works with the same CSS.
I know it's a common problem, but none of the solutions worked in this particular case.
You can change your tolerance option and set it to pointer.
Specifies which mode to use for testing whether the item being moved
is hovering over another item. Possible values:
"intersect": The item overlaps the other item by at least 50%.
"pointer": The mouse pointer overlaps the other item.
Demo: http://jsfiddle.net/Fs772/
I have an image that I drag from one part of the page and drop into a DIV. No problem. But when I just drag the image around inside its new DIV home, I still trigger the DIV's drop handler. Is there an easy way to disable the drop handler for elements that are already in the droppable?
Thanks
You can add a class to the dropped element, then in the drop function check if the element have that and if so exit the drop function.
In my example I clone the element in a new one on drop, if you use the dragged you must change the selected element.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
alert('dropped');
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/hLxAd/
I'm using Crossrider, I want to add a draggable div to the page's DOM.
The following code works well on Chrome and Firefox, and the dragstop handler function is fired for both Chrome and Firefox without any problems.
But for IE, the div is draggable once ! i.e. Once the div is dropped, it cannot be dragged again, and more strange is that the dragstop event handler is not fired at all in IE !?
How to fix this in IE !?
Here is the code:
extension.js file
appAPI.ready(function(jQuery) {
appAPI.resources.jQueryUI('1.10.1');
appAPI.resources.includeCSS('styles.css');
var $div = jQuery('<div class="square" ></div>').appendTo('body');
$div.draggable( {containment: "window", scroll: false} );
$div.bind('dragstop', function() {
console.log("drag stopped ...");
});
});
styles.css file
.square {
display:block;
z-index: 1000001;
background-color: #000000;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
position: fixed;
}
Kindly note, that I tried the code without crossrider and I run it on IE, it works well. You can try it by using this link: http://jsfiddle.net/GHaMV/
I ran into the same problem using Crossrider and managed to fix the issue by declaring a handler function that returns the draggable element, so your code should look as follows:
$div.draggable({
containment: window,
helper: function() {
return $div;
}
});
Hope it helps...
There is no dragstop event, just the stop hook (see the docs):
Use it like this:
$div.draggable({
containment: "window",
scroll: false,
stop: function() {
console.log("drag stopped ...");
}
});
I have a jquery ui sortable list. I set up a "trash can" to get rid of items I didn't want on a list. Once I had the 'draggable' set up on my list items, they no longer sort.
trash can
$("#trash").droppable({
drop: function(ev, li)
{
var $element = li.draggable;
$element.remove();
$.ajax({
url: 'deltask.php',
data: 'id='+$element.attr('id'),
dataType: 'html',
success: function(data)
{
}
});
}
});
Making the list sortable
// set our listdiv ul as sortable
$("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){
var order = $(this).sortable("serialize") + '&action=update';
$.post("updatelist.php", order, function(){
});
}
}); // listdiv ul end
and making all list items in that ul draggable so I can drag and trash:
$("#listdiv li").draggable({
opacity : 0.7,
revert : 'invalid',
helper : 'clone',
zIndex : 100,
cursor : 'move'
});
Sorting works as long as I don't include the section just above that makes the <li>'s draggable. Adding that let's me drag and trash em but the list items are no longer sortable.
What's my bad, please?
Thanks,
Steve
NOTE: I don't know the protocol for answering ones own question so I'm just editing my original question! Someone slap me if I'm wrong to do this pls.
Workaround to the problem stated above:
After sleeping on it I thought "Why bother with making my sortable list <li>'s draggable and make my trash can a droppable?"
I just make my trash can a sortable and use connectwith on my list div and trash div and set up a receive event handler and that should work? Let's see...
$("#trash").sortable({
connectWith: '#listdiv',
receive: function(event, ui)
{
var $element = ui.item;
// alert ( $element.attr('id') ) ;
// remove this from original list
$element.remove();
//remove this item from trash list
$("#trash li").remove(),
// remove from database
$.ajax({
url: 'deltask.php',
data: 'id='+$element.attr('id'),
dataType: 'html',
success: function(data)
{
// alert(data);
}
});
} // end receive
}); // end trash
// set our listdiv ul as sortable
$("#listdiv ul").sortable({
opacity: 0.6,
cursor: 'move',
connectWith: '#trash',
update: function()
{
var order = $(this).sortable("serialize") + '&action=update';
$.post("updatelist.php", order, function(){
});
}
}); // end listdiv ul sortable
My original list sorts fine and I can drag a list item to the trash "list" and just remove() it when it arrives from the original list, the trash list, and from my database.
Perhaps not too elegant but hey, it works.
How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?
Could create a DisableDrag(myObject) and a EnableDrag(myObject) function
myObject.draggable( 'disable' )
Then
myObject.draggable( 'enable' )
To temporarily disable the draggable behavior use:
$('#item-id').draggable( "disable" )
To remove the draggable behavior permanently use:
$('#item-id').draggable( "destroy" )
To enable/disable draggable in jQuery I used:
$("#draggable").draggable({ disabled: true });
$("#draggable").draggable({ disabled: false });
#Calciphus answer didn't work for me with the opacity problem, so I used:
div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}
Worked on mobile devices either.
Here is the code: http://jsfiddle.net/nn5aL/1/
enabledisabledraggablejqueryopacityproblemhtml
It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:
$("#drop-target").droppable({
drop: function(event, ui) {
ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
…
}
});
HTH someone
Seems like no one looked at the original documentation. May be there was no it at that time))
Initialize a draggable with the disabled option specified.
$( ".selector" ).draggable({ disabled: true });
Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );
In the case of a dialog, it has a property called draggable, set it to false.
$("#yourDialog").dialog({
draggable: false
});
Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.
The following is what this would look like inside of .draggable({});
$("#yourDraggable").draggable({
revert: "invalid" ,
start: function(){
$(this).css("opacity",0.3);
},
stop: function(){
$(this).draggable( 'disable' )
},
opacity: 0.7,
helper: function () {
$copy = $(this).clone();
$copy.css({
"list-style":"none",
"width":$(this).outerWidth()
});
return $copy;
},
appendTo: 'body',
scroll: false
});
I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.
For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below.
$(".disc").draggable({
revert: "invalid",
cursor: "move",
start: function(e, ui){
console.log("element is moving");
if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
console.log("illegal move");
//This will prevent moving the element from it's position
e.preventDefault();
}
}
});
You are welcome :)
Change draggable attribute from
<span draggable="true">Label</span>
to
<span draggable="false">Label</span>