jQuery and AJAX Tutorials 39 | jQuery UI Droppable Events Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

what's up guys my name is Ilias and
welcome to your 39th tutorial on jQuery
so Institute oriole we are going to work
with this new jQuery UI extension well
it's not a new extension but its new
position for us and as you know in the
previous tutorial we bound this jQuery
UI extension to our project and we
already added this feature so we can
drag and drop elements but the next
feature we want to have we want this
state to be stored on the server when we
drop the picture and so we want to track
the event of drop in the picture and
well now you guys have don't have any
idea how to track this event and there
is actually no such an event for
dropping in jQuery but the jQuery UI
extension which has this function
sortable for instance provides lots of
cool functionality and it also has kind
of events which we can get advantage of
so now I want you guys to go to your
script
jas document and make sure you find this
portfolio dot sortable which applies
this sortable function to this portfolio
and makes the portfolio suitable for the
most part and here you can actually just
start typing your event and there are
some events like start and start is used
when you like start when you like start
dragging something and you can also type
stop and we actually want to stop
because stop this is the kind of event
which is which fires when we drop the
element after dragging it and we can
just say stop how long and then tell the
jQuery what it should do when it stopped
and so what I'm going to do want a
function to
we run so I'll just say function and
just to find any function for the most
part and I'll stare a little bit better
so you can see the structure of this or
this functions because we have actually
like one function another function
another function we have actually three
nested functions because jQuery is a
function as well because jQuery is
actually a a big function which takes
lots of parameters so you can always
replace your daughter sign by the word
jQuery by the way I I think I I told you
guys and then one of the first stories
about that so anyway and this function
will run when we stop dragging and now
just go ahead and write a test so that
we can check if it stops in fact I mean
if it's this function will run in fact
when we stop dragging let's just go
ahead and say you've just dropped the
image or the picture and save it go to
the browser reload the page and open the
console of course so that you can see
the outputs and now I pick an element I
am dragging it and now I'm gonna stop
I'm going to release the on it drag it
and now it works it says you've just
dropped the picture so that means that
we can get rid of this console.log
because we only use that in order to
test and so this console.log we can
create some space and start writing our
code for a Jaques and all this antics
code will do it will send this current
state of this actually this will just
send the whole contents of this
portfolio and I'll show you guys what
the portfolio is runtime instead of its
wrapper inside of this you are
I mean UL ID portfolio we have
our our images and if I drag the this
image to the front you'll see that this
image is in fact changed its physical
position in the document and we so what
we are going to do we just will just
send this information basically the
contents of this portfolio to the server
and I already wrote a script in PHP
which just basically stores this list
again so our task but next tutorial will
only be to create and and a proper
adjective and send the contents of this
portfolio so this is something what we
are going to do in the next tutorial and
I hope you guys like this one so I'll
see you guys in the fortieth tutorial