i have trouble to drag and drop an item (its not an event, its an employee name) on an event.
I want to drag an employee (see picture) on an event, but the 'employee' is
no event. I am using jquery UI draggable/droppable.
<script>
var calendar;
$(document).ready(function() {
calendar = $('#calendar').fullCalendar({
droppable: true,
dropAccept: '.employeeItem',
drop: function(date, allDay, jsEvent, ui) {
}
});
});
$(function() {
$(".employeeItem").draggable();
$(".fc-event").droppable({
drop: function(event, ui) {
}
});
});
</script>
<?php for($i=1;$i<=30;$i++){?>
<div>Simpson, Homer<br>
10 / 14 h
</div>
<?php }?>
<div id='calendar'></div>
After dropping an employee on an event, i need the corresponding
event data (event-id etc) to save the process to the db. But jquery fullcalendars "drop (callback)" only provides the date that the item was dropped on.
You can use eventAfterRender to add a custom id to the dom element using data properties. Then grab the id after the drop (event.target), update the event in the db, then refresh the dataSource.
Fiddle
$(document).ready(function() {
$('#calendar').fullCalendar({
...
eventAfterRender: function(event, element){
element.data('myId',event.myId);
$(element).droppable({
drop: function( event, ui ) {
var dragged = ui.draggable;
var targetId = $(event.target).data('myId');
}
});
}
...
});
});
$(document).ready(function() {
$(".employeeItem").draggable();
});
Related
What I have is have a two sortable list, where one is populated with a set of items. Users should be able to sort between these lists.
They should also be able to create new lists which they can also add the inital items. So the sortable elements are static but the sortable lists are dynamic.
The sortable events are triggered for the initial two lists and work fine. However the problem is with the dynamically added lists. They get added no problem and you can sort items into them. The problem is that the none of the events are triggered such as 'receive' or 'activate', so when I drag an element to one of the new lists I want to get the id of the list, but it never triggers any of those events.
Here is a simple fiddle of it
JS Fiddle
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function(event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log('receiving id :' + receivingID);
}}).disableSelection();
This never seems to run on the dynamically added lists
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable"
,
activate: function(event, ui) {
console.log("activated list" + id);
}}
).disableSelection(); }
This is what is run when the user adds another list.
Here is an update to your JS Fiddle with the problem resolved. LINK!
The $(".connectedSortable").sortable(...) chunk needs to be run at the end of the $('#add_new_list').click(...) function. The .sortable(...) code adds sortable to all existing items but not future items.
The changes I've made wrap the .sortable(...) in a function called refreshHooks() which is run on page load and again every time "Add New List" is clicked.
$(document).ready(function () {
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable",
activate: function (event, ui) {
console.log("activated list" + id);
}}
).disableSelection();
}
var list_counter = 2;
$('#add_new_list').click(function () {
$('#add_new_list').before($(
'<ul id="list' + list_counter + '"' +
' class="connectedSortable"></ul>'
));
var lists = {};
lists.list_id = ['list' + list_counter];
makeSortable(lists.list_id);
list_counter++;
refreshHooks();
});
function refreshHooks() {
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function (event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log(receivingID);
},
activate: function (event, ui) {
console.log("activated list");
}
}).disableSelection();
}
refreshHooks();
});
When I am dragging and dropping an item, following code using sortupdate gets triggered
$('#sortable').sortable().bind('sortupdate', function (event, ui) {
debugger;
//Triggered when the user stopped sorting and the DOM position has changed.
});
BUT
start, update, stop, change events are not getting triggered
That is,
$('#sortable').sortable({
start: function(event, ui) {
//
},
change: function(event, ui) {
//
},
update: function(event, ui) {
//
}
});
My goal is to find the original and dropped position of an item.
EDIT (for clear understanding):
In short,
$('#sortable').sortable().bind('sortupdate' ..... is working(triggered)
$('#sortable').sortable().bind('start' ..... is not working(not triggered)
$('#sortable').sortable().bind('change' ..... is not working(not triggered)
$('#sortable').sortable().bind('update' ..... is not working(not triggered)
$('#sortable').sortable().bind('sort' ..... is not working(not triggered)
If possible to get the values of old and new position with sortupdate event alone, then also it is ok..My ultimate goal is to find the position of both old and new for an item.
all this event are prefixed with sort so instead of start it becomes sortstart
i have created a fiddle where it will give the message of item moved from and to have a check at
http://jsfiddle.net/p2gethgh/
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
var from,to;
$("#sortable").on("sortstart",function(event,ui){
from = $(this).children().index(ui.item);
});
$('#sortable').on('sortdeactivate',function(event,ui) {
to = $(this).children().index(ui.item);
alert(ui.item.text()+' moved from '+(from + 1)+' to '+(to + 1));
});
This is the correct way to bind event to jquery sortable
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
OR
$( ".selector" ).on( "sortstart", function( event, ui ) {} );
I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.
At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});
Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.
You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/
I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});
You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/
I have the following code
$(document).ready(function() {
$('#content_reservation-fullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: <?php echo($event_list); ?>
});
$("#content_reservation-fullCalendar").resizable({
handles: 'e',
create:
function(event, ui){
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize intialized");
},
resize:
function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize callback triggered");
}
});
/*
$("#content_reservation-fullCalendar").bind("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
*/
});
as a drupal theme template, when I set the event callbacks in the initializer they do not get triggered however when I bind the event resize via bind it works, however not for resizecreate. I'm wondering why the events aren't registering as part of the intializer, is there something I'm missing or could it be some configuration issue. I don't receive any php/javascript errors.
Relevant JQuery UI Documentation Page
I have stumbled upon this type of problem myself. It seems that the bind events and the initializer events are not the same thing, go figure, and you cannot trigger the initializer events. For instance, Binding to 'resizecreate' should work, but will not be the same function as you defined in the 'create' function of the initializer.
Try defining your events like so:
//This should define all your events
$('.selector').resizeable().bind({
resizecreate : function(event,ui) {...},
resizestart : function(event,ui) {...},
resize : function(event,ui) {...},
resizestop : function(event,ui) {...},
});
You should be able to trigger these events like:
//You can trigger the events by doing:
$('.selector').trigger('resizecreate');
$('.selector').trigger('resizestart');
$('.selector').trigger('resize');
$('.selector').trigger('resizestop');
Also note that the callbacks will fire when you operate the widget (i.e. resizing the container) as normal when defining the event callbacks with the bind method.
EDIT: Ok, I think I solved it, or at least this worked for me. Since the resizecreate event only fires when the resizeable widget is created, you must bind to it before you create the widget.
The following example defines a resizeable widget and will fire two alerts: one from the bind definition, one from the initializer.
HTML
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
JavaScript
$(function() {
$( "#resizable" ).bind('resizecreate',function() {
alert('BIND');
}).resizable({
'create' : function() {
alert('INITIALIZER');
}
});
});
Also note, calling $('#resizable').trigger('resizecreate'); will fire the callback provided to the bind function as noted before (in this case, an alert box with 'BIND').
$('.sidebox').resizable().bind({
resizecreate: function(event, ui) {
console.log('C')
},
resizestart: function(event, ui) {
console.log('RS')
},
resize: function(event, ui) {
console.log('R')
},
resizestop: function(event, ui) {
console.log('RST')
},
});
Try live() or delegate() for all your asynchronous binds
$("#content_reservation-fullCalendar").live("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
Initialize the resizable with the resize callback specified:
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
Bind an event listener to the resize event:
$( ".selector" ).on( "resize", function( event, ui ) {} );
More info : http://api.jqueryui.com/resizable/
Example for custom event :
var element;
element.resizable({
'resize' : function() {
element.trigger('myevent');
}
});
$('.elementselector').bind('myevent', function() {
alert('Custom Event');
});