So I understand this is how we normally call a jquery droppable:
$( ".selector" ).droppable({
drop: function(event, ui) { ... }
})
Is it possible for me to write something like this:
$( ".selector" ).droppable({
drop: function(event, ui, additionalParameter) { return function(){....} }(myParameter)
});
As long as the value is a function reference, you can do whatever you like. So yes!
You probably want to capture the event and ui objects, so they need to be parameters in the returned function. So your code would be:
$( ".selector" ).droppable({
drop: function(additionalParam){ return function(event, ui){...}; }(myParam)
});
Related
I'm trying to optimize response time on a page with a "large" table that is a jquery droppable that accepts ~6 draggables. Like others I've seen poor response time when making each of the droppables. I've read both this post and this post, but I can't seem to get my code to work.
My basic problem is I don't know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.
Here's how I've defined my jquery code:
$( "#grid table" ).droppable({
//disabled: 'true',
//activate: function (event, ui) {
// console.log("Activated table")
//},
//over: function (event, ui) {
// console.log("Dragged over")
//},
//activeClass: "ui-state-default",
//hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
tolerance: 'pointer',
drop: function( event, ui ) {
console.log("draggable DROPPED!!!");
//$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
console.log('Dropped cell is'+cell);
console.log(ui.position)
console.log(ui.offset)
console.log(document.elementFromPoint(ui.position.left, ui.position.top))
$(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
console.log('Setting background to:'+ui.draggable.attr("colorValue"));
}
Any help you can provide is much appreciated.
$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped
I am creating a jQuery slider to loop through a collection of divs, if I hold the slider down and drag it and let go. The handleSlider() is called. If I click on a random point in the slider, the function never gets called. I've tried to use two other event types with no luck. Is there an event handler for "When the user clicks/jumps" on the slider without sliding?
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function( event, ui ) {
handleSlider();
}
});
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});
I believe your problem is in the syntax. Every time you use $ it makes a new jQuery object, so
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function( event, ui ) {
handleSlider();
}
});
//below are not necessarily referring to the original slider, but rather creating new sliders.
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});
#Andrew is correct in his syntax. All you should need is the 'change' event, which you can set in your original declaration like this:
$( "#video_seek" ).slider({
change: function( event, ui ) {
handleSlider();
}
});
or even like this:
$( "#video_seek" ).slider({
change: handleSlider
});
if you need to attach an event handler after the fact, do so like this:
$( "#video_seek" ).bind( "slidechange", function(event, ui) {
handleSlider();
});
or even:
$( "#video_seek" ).bind( "slidechange", handleSlider);
(Edit)
Putting it all together and avoiding the production of subsequent jQuery objects.
var videoSeek = $('#video_seek');
videoSeek.slider({
slide: handleSlider
});
//added later on not necessary just for example of doing so
videoSeek.bind('slidechange', handleSlider);
function handleSlider(event, ui){
//do stuff
}
You need to set the events inside the actual object creation or bind them afterwards...
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function(event, ui) {handleSlider();}
stop: function(event, ui) {handleSlider();}
change: function( event, ui ) {handleSlider();}
});
or:
$( "#video_seek" ).slider({
range: "max",
step: 1,
});
$( "#video_seek" ).bind( "slidechange", function(event, ui) {
handleSlider();
});
Hay I'm using this code to clone a draggable element
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable"});
Which works great. However, the "cloned" object no long reacts to "droppable" areas.
Is there any way around this? Can i make the draggable live? So any new .draggable elements react with the droppable one?
You have to declare an drop-event function to interact on droppable.
see Here
Every clone interacts with the droppable.
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable",
drop: function( event, ui ) {
$( this )
.addClass( "dropped" ).find( "> p" )
.html( document.lastModified );;
}
});
try like this
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
//re-make objects draggable
$('.draggable').draggable({helper: "clone"});
});
...
Did this as an example for a different post.
http://jsfiddle.net/hHKh9/2/
I think you are missing helper:'clone' on the droppable
How can I change CSS property once sorted. Something likes this:
$( "#sort" ).sortable({
$(#div1).css("background-color","yellow");
});
Thanks alot
When you call initiate the plugin, make sure you pass a handler for the stop event:
$('#sort').sortable({
stop: function(){
$('#div1').css('background-color','yellow');
}
});
http://docs.jquery.com/UI/Sortable#events
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});
Look at the events for sortable on the jQuery UI website: http://jqueryui.com/demos/sortable/#events
Depending on the event you want, you can use:
$( "#sort" ).sortable({
change: function(){
$("#div1").css("background-color","yellow");
}
});
I have a simple code example # http://jsbin.com/ukiwo3/edit
It has 2 connected lists and a load of bound events. I'm hopeful I've missed something simple as based on http://jqueryui.com/demos/sortable/ Events I think I should see all these events fired when I drag and reorder a question li. At the moment only sort logs to the console.
Can anyone tell me whats wrong and how to get the rest to fire?
Thanks,
Denis
The events are named differently when binding, for example sortstart instead of start. Look at the list of events on the demo page for a full list of what your binds should be.
Overall, it should look like this:
$( ".questions" ).bind( "sortstop", function(event, ui) {
console.log("stop event");
});
$( ".questions" ).bind( "sortstart", function(event, ui) {
console.log("start event");
});
$( ".questions" ).bind( "sortchange", function(event, ui) {
console.log("change event");
});
$( ".questions" ).bind( "sort", function(event, ui) {
console.log("sort event");
});
$( ".questions" ).bind( "sortremove", function(event, ui) {
console.log("remove event");
});
$( ".questions" ).bind( "sortout", function(event, ui) {
console.log("out event");
});
$( ".questions" ).bind( "sortover", function(event, ui) {
console.log("over event");
});
$( ".questions" ).bind( "sortupdate", function(event, ui) {
console.log("update event");
});
(not optimized, just showing event names)
I did this and I see the stop event get triggered:
$('.questions').sortable({
axis: 'y',
connectWith: ".questions",
placeholder: "question-highlight",
stop:function(event, ui) {
console.log("stop event");
}
});
It seems to me those 'events' are not accessible via bind.