Develop Reference

Change the dragged object when draggable begins

I am trying to create some thing like a UI designer. So I have a 'toolbox' and a 'canvas'. When I mark the tool box items as draggable, I am able to drag them. But what I need is to drag a copy, so that I can drag multiple instances of a tool item to the canvas.
$('.tool-box-item').draggable({
helper : 'clone',
drag : function (event, ui){
// jQuery does not allow object modification here
},
});
This does not work as the cloning is applied only while dragging and as soon as the drag is complete, the original element moves. I tried overriding the drag property, but I am unable to modify the dragged element. Same was the case with start.
Note : I can not use the stop event as I want to create the copy when the drag starts and not after it. I was also able to create a copy by defining the canvas as droppable and making a copy there, But then again I want to create a copy when the drag starts.
I think I will need to create a custom drag function but was hoping if jQuery has any other alternative way.
Here is a jsfiddle, but I want to clone the element at the start and not after the drag.
EDIT : The destination is a 3rd party control. It has its own implementation for drop event (stacking and aligning). In case I clone it at the end I will have to modify their implementation.

To keep "dragend" event, try to use original element for dragging, and clone it for place to your "toolbox".
var graggableConfig = {
helper:"clone",
stop: function(event, ui){
var clon = $(this).clone();
clon.attr("style","")
.appendTo(".src")
.draggable(graggableConfig);
$(this).detach()
.attr("style","")
.appendTo(".dst")
.draggable( "destroy" );
}
};
$(".item").draggable(graggableConfig);
codepen here

You can use jquery's clone (https://api.jquery.com/clone/) method to clone your draggable element once it is dropped. Would something like this meet your needs?
$( function() {
makeDraggable($( "#draggable" ));
});
function makeDraggable(element) {
$(element).attr('style', 'position:absolute').draggable({
start: function() {
makeDraggable($('#draggable').clone().attr('style', '').appendTo('body'));
}
});
}
Its a little rough but here is the jsbin: https://jsbin.com/tasodixoka/edit?html,output
Edit: I updated your fiddle: https://jsfiddle.net/z9rrL6po/6/

Proper way to disable jQuery UI dragging on some members of a class

So I have a class to which jQuery UI draggable is applied too.
I want some classes in that are also members of that parent class to not be draggable.
I've tried:
$('.class:not(.class1, .class2, .class3').draggable({
//
});
Here is a JS Fiddle: http://jsfiddle.net/kLpJ8/2/
also
$('.class').not('.class1, .class2, .class3').draggable({
//
});
Here is a JS Fiddle: http://jsfiddle.net/kLpJ8/3/
also
$('.class').not('.class1').not('.class2').not('.class3').draggable({
//
});
Same JS Fiddle as above
and
$('.class').draggable({
start: function(){
if($(this).is('.class1')) return false;
if($(this).is('.class2')) return false;
if($(this).is('.class3')) return false;
}
});
This blocks everything: http://jsfiddle.net/kLpJ8/4/
None of these seem to work.
Is there a way in CSS or JS / jQuery that I can properly disable draggable? Why I want to is so that elements of these smaller classes' text can be highlightable and selectable so that the contextual right-menu can be triggered and the user can copy or anything in the menu.

You need to pass "destroy" as a parameter for draggable, so your code will look like
$('.class').draggable();
$('.class1, .class2, .class3').draggable("destroy");

jQuery Not Firing on() change

I have an ajax call that returns a JSON object with a select drop down list like so:
{
"responseCode": 200,
"field_value": "1",
"field_options": {
"175": "Incorrect Listing",
"176": "High Return Rate",
"177": "Easily Damaged"
},
"selectOptions": "<select id=\"do_not_order_options_102450\" class=\"input-medium\"><option value=\"\">Choose Option<\/option><option value=\"175\">Incorrect Listing<\/option><option value=\"176\">High Return Rate<\/option><option value=\"177\">Easily Damaged<\/option><\/select>"
}
On my page I am outputting the select drop down list. (I have a lot of these on my page btw.)
In my jQuery script I have this set up:
$(function(){
$('select[id^="do_not_order_options_"]').on("change",function(){
alert(1);
});
});
It is not firing when I choose an option... Anyone know what may be the issue?
Thanks!

The code you've quoted will hook up the event handler for the matching select boxes that exist right then. But if you add more to the page, their change event is not hooked.
You may want to look at event delegation:
$(function() {
$('some container all these selects share').on('change', 'select[id^="do_not_order_options"]', function() {
// Handle change
});
});
jQuery ensures that the change event bubbles, and so we can hook it on a container element and use jQuery's assistance to trigger our handler only for matching elements (selects, in this case).
Since we hook the event on the container, adding more selects inside the container makes them magically work.

Is there an event called while a jQuery UI draggable element is being reverted to its original position?

I have a draggable element using jQuery UI, and have a function attached the drag event that gets continuously called with the element's position while the user is dragging it.
I also have revert: true set on this element, so when the user stops dragging the element springs back to its original position. Is there a way I can attach a listener to perform the same functionality as when it's being manually moved?
I can't see anything specifically related to the revert property in the docs, so if that's not possible is there a more general event called while an element is moving?
Thanks!

It appears there's nothing in the API for this, so I've had to hack it using setInterval.
var revertInterval;
var revertEvent = function(el) {
revertInterval = setInterval(function() {
// Do things
// e.g. console.log(el.position().top);
}, 5);
}
$('#draggable').draggable({
revert: function() {
revertEvent($(this));
return true;
},
stop: function() {
clearInterval(revertInterval);
}
});

the revert is accept function as follow
revert: function(param){}
DEMO

How do I inherit jQuery effects when i introduce a new DOM

I have a slideshow that i replace an unordered list within the slide show, the images change but any effects are not inherited. this is the script that introduces a new DOM:
jQuery("#kwick1").click(function () {
jQuery('#photography').load('/design.html #photography');
});
jQuery("#kwick2").click(function () {
jQuery('#photography').load('/design.html #design');
});
how do i get the jQuery slideshow to inherit this new list of images??
i both these functions and the slide show function in the same file.
I have a
jQuery(document).ready(function() {
that loads the slideshow script.

You have to let us know what slideshow plugin you are using. Regardless, you probably just need to destroy your old slideshow instance and restart it. Something like:
//start slideshow on
var slideshow = $('#slideshow').cycle();
slideshow.start();
$('#button').click( function() {
//depending on plugin api maybe stop, add and start again
slideshow.stop();
slideshow.addImages();
slideshow.start();
//or perhaps just destroy old slideshow and restart
slideshpw = $('#slideshow').cycle();
});

To attach events to newly added elements you should use live() or delegate();
jQuery('.yourselector').live('click', function(){
//do something on click
});

Instead of attaching events to each of elements, you should learn how to use event delegation. That way you can attach single event listener on some container ( or even document ) and catch the events as they bubble up.
Additionally it will make your code look much cleaner and easier to understand.
http://lab.distilldesign.com/event-delegation/
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-minutes/
http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
P.S. , if you put your code at the bottom of the HTML ( before </body> ) then, when it triggers , it will already be an "onDomReady" event.