Is there any way of dropping a draggable into the droppable by hardcoding and not by actually going into the browser and doing drag-drop??
Thanks in advance.:D
I don't know if I have understood very clearly, in any case I think it is curious perspective,if you mean to animate and do the same things if we have dragged a layer into a droppable layer.
I suppose you could do it like this:
http://www.jsfiddle.net/dactivo/QLTUS/
You use animate() to move the layer to the droppable, and then in the complete function, you imitate what normally happens in a dropping action, that is to say change the class, and there you can include whatever.
I mean it is not important the drop event, but what you execute in the drop event, that can be included in your complete event of the animation. I have encapsulated this in a function called layerDrop().
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
layerDrop();
}
});
$("#btnMove").click(function()
{
$("#draggable").animate({"left": $( "#droppable" ).offset().left ,"top": $( "#droppable" ).offset().top},
{
duration: 1000, specialEasing: { width: 'linear' },
complete:function()
{
$("#message").html("Completed!");
layerDrop();
//whatever
}
}
);
});
function layerDrop(){
$( "#droppable")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
I think you mean to position a dragged option programmatically. If that is the case then look in the official jQuery draggable documentation: http://docs.jquery.com/UI/API/1.8/Draggable
It seems the short answer is:
To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so:
$(this).data('draggable').offset.click.top -= x
Related
I'm using the jQuery slider in my program and trying to make release of the slider trigger an event that updates the database. What I have is:
$('.ui-slider-handle').mouseup(function () {
var $span = $(this).closest('#sliders').find('span.value'); // the span element that holds the value associated with the slider that was clicked
$.ajax({
method: 'POST',
url: '/UpdateAnswer',
data: {
Answer: {
QuestionId: $span.attr('data-qstnid'),
AnswerId: $span.attr('data-answid'),
AnswerVal: parseInt($span.text(), 10)
},
pid: $('input[name="pid"]').val()
}
});
});
and this works fine except in one type of unexpected situation: when the holds down the mouse button on the slider, moves the slider, then moves their mouse off the slider before releasing the mouse. In that situation the $span that is the slider is not defined.
What is the best way to solve this? Does JavaScript/jQuery have a natural way of doing this? Or am I going to have to create a mousedown handler that passes the element to some other function that then attaches a mouseup handler ... or something like that?
Let me know if I need to go into more detail to describe my situation properly.
Instead of using a mouseup event, you should probably be using the change or stop events of the slider itself.
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
or
$( ".selector" ).on( "slidestop", function( event, ui ) {} );
You should use the jQueryUI event stop, they have already figured this out for you. From the documentation:
$( ".selector" ).on( "slidestop", function( event, ui ) {} );
I can't figure out how to prevent that draggable objects are added several times in one drag event. I made a small example where you can produce the problem.
https://jsfiddle.net/richiwarmen/afqu96v3/1/
$( ".draggableEl" ).droppable({
accept: ".dropme",
drop: function( event, ui ) {
$(this).append(ui.draggable.clone().css("left","0px"));
}});
$( ".draggableEl" ).draggable();
$( ".dropme" ).draggable({
revert: 'invalid',
helper: "clone" ,
});
drag the purple block in the upper left of the green block, .
You have multiple droppable sibling divs on top of each other. When you drop onto one of them, the ones below it will also activate.
If you made them nested you could use the greedy: true option. But in this case since your divs are all siblings, you can't really do much about it.
Demo - https://jsfiddle.net/Patosai/afqu96v3/2/
See here - Jquery droppable - Greedy not working as expected.
I think you just want to remove the word clone:
$( ".draggableEl" ).droppable({
accept: ".dropme",
drop: function( event, ui ) {
$(this).append(ui.draggable.css("left","0px"));
}});
$( ".draggableEl" ).draggable();
$( ".dropme" ).draggable({
revert: 'invalid',
});
I have sortable elements in different sortable groups. I would like to use one element as a tool to add new elements. It should work this way: When a user drags this "add new" element to specific position there should be created new element and dragged one ("add new") should stay on it's previous position.
Do you have any idea if this is possible?
If my understanding is correct, this link may give you some idea of how to do it. Try the demo given on this page.
[link:- http://jqueryui.com/droppable/#revert]
// Here is the code copied from the same page. I have modified it a bit.
$(function() {
// Element which you will drag
$( "#draggable" ).draggable({ revert: "valid" });
// Element to which you will drag the above(draggable) element.
// On 'drop' event of this droppable you can add the element.
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
/*Write code for adding new item in the sortable list here*/
}
});
});
So I see this code in jquery-ui docs and I wonder why all the statements are wrapped in $(function() {...});
The jquery docs says that $() enhance the object in it, but I fail to see why we need it here. Is it a convention or is it actually meaningful?
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
$(function() {}); is, for all intents and purposes, the same as $(document).ready(function() {});; although I believe it is called slightly before document ready.
What it does is call the code within the function when the document has finished being created. That is all the DOM tree will have been created by the time that function loads. This allows you to manipulate the DOM safe in the knowledge those objects will have been created at that time.
Here is an example:
<script>
//This code is called straight away, your DOM hierarchy may not
//be complete and the object #draggable may not have been created yet,
//as such draggable() may not work properly.
$( "#draggable" ).draggable();
//This code is called once the DOM tree is complete,
//as such you know all your objects have been created
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
See the jQuery documentation for a more thorough explanation
This is a shorthand for $(document).ready(function() {})
It executes once the whole document is loaded, rather than executing when it's encountered during the parsing.
It also creates a context for the items with-in its' statement block, and this just as important as
$(document).ready(function() {}), document ready.
what I want to do is to know where (not in terms of position (x, y), but a reference to the DOM element) an object was dropped.
I have a grid made up with divs where you can drop various items and I need to know which div on the grid was the item dropped on (getting its id would be fine). The callback function
function(event, ui) { //code here }
has just that ui object who doesn't apparently contain any information about this, but only about the draggable item or its helper.
What you need to use is the jQuery Droppable class, which you can read about in the jQuery docs.
Basically, for every element that you wish to be able to drop a draggable element on, you create a Droppable object, which will trigger once another object is dragged onto it. This is the example from the jQuery docs:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
The $(this) in that example is the element you are looking for.