how to figure out which list item has been dropped - javascript

I have 3 columns.
<div id="catalog">
<ul id="author">
<li>Different Author names</li>
....
</ul>
<ul id="genre">
<li>Different Genres</li>
</ul>
<ul id="publish">
<li>Different Publishers<li>
</ul>
</div>
I use jquery to drag and drop the items from these list to different list cart like this
$(function() {
$( "#catalog li" ).draggable({
appendTo: "body",
helper: function( event ) {
return $( "<li class='bit-box'>" + $(this).text() + "</li>" );
},
cursorAt: { cursor: "move", top: 5, left: 5 }
});
$( "#cart ul" ).droppable({
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( this ).find( "li:contains('" + ui.draggable.text() + "')" ).remove();
$( "<li class='bit-box'></li>" ).text(ui.draggable.text()).append("<a class='closebutton' href='#' onclick='$(this).parent().remove();'></a>").appendTo( this );
}
});
Is there any any way to figure out which list the are dropped item belongs to.
I appreciate any help.

Try using this in the drop handler:
ui.draggable.closest('ul').attr('id')
It should give you an id of the list that dropped item belongs to.

You should inspect the $(this).parent().id property. if you want the id of the parent list.

Related

Hamburger toggle menu for one page site

I am developing a super simple site using jQuery and bootstrap libraries but I would like the menu items to jump to the section (already done with anchors). But when I navigate back to the top the menu dropdown is still open. How would I setup up a toggle so it closes on clicking a menu item?
This is my initial code:
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<div class="menu">
<ul>
<li>Home</li>
<li>Jeff Anderson</li>
<li>Hand Built Frames</li>
<li>Bike Repairs and Maintenance</li>
<li>Frames and Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
Any help greatly appreciated. Thanks.
Anything that gets to the document will hide the dropdown
$(document).click(function(){
$("#dropdown").hide();
});
Clicks within the dropdown won't make it past the dropdown itself
$("#dropdown").click(function(e){
e.stopPropagation();
});
I believe adding these code will solve your problem.

How to append dragged li in to droppable ui using Draggable and Droppable in jQuery UI?

Here what i want to do
HTML
<ul class="droppable"> </ul>
<ul class="droppable">
<li class="draggable"> Item 1</>
<li class="draggable"> Item 2</>
</ul>
jQuery
$(function () {
$(".draggable").draggable();
$(".droppable").droppable({
drop: function (event, ui) {
alert("Dropped!");
}
});
});
i want to drag li into another UL and li has to append into dropped UL.
Hope this will help you.
Demo:http://jsfiddle.net/x5T4h/519/
$(function() {
$( ".drag li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});

Jquery Ui draggable want to set Position for drop

Using Jquery UI draggable.
In which I am dragging a (#b1)thumbnail & appending a div.But i want to set drop area.Like if i drag my thumbnail in a .box(border box) then only append works & else not.I want to set such condition.
My code
$( "#b1" ).draggable({ revert: true });
$( ".box" ).droppable({
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
$( "#b1" ).draggable({
start: function(event, ui) {
console.log(event);
console.log(ui);
},
stop: function(event, ui) {
$(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();"> <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');
}
});
This is my fiddle code: http://jsfiddle.net/zha4v66u/2/
set droppable like
$(".box").droppable({
accept: "#b1",
drop: dropped,
scope: "drop",
})
function dropped(event, ui) {
$(this).append(ui.draggable);
$(ui.draggable).css({ "left": "0", "top": "0" });
}
}
http://api.jqueryui.com/droppable/#option-accept
jQuery('#droppable').droppable(
{
accept: '#draggable',
drop: function(event, ui)
{
ui.draggable.data('dropped', true);
// awesome code that works and handles successful drops...
}
});
jQuery('#draggable').draggable(
{
revert: false,
start: function(event, ui) {
ui.helper.data('dropped', false);
},
stop: function(event, ui)
{
alert('stop: dropped=' + ui.helper.data('dropped'));
// Check value of ui.helper.data('dropped') and handle accordingly...
}
});
You can try this using accept feature.
jQuery drag and drop - checking for a drop outside a droppable
Below solution. Hope this solves the issue.
Step 1: Html
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Step 2: Jquery
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
// After drop done
}
});
});
</script>

Jquery Drag and Drop on Ajax loaded Div

I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either.
Here is how I'm calling everything, I removed the extraneous code for brevity.
main page
<head>
<scripts -- jquery, jquery ui>
<script>
$(document).ready(function(){
$( "#site-preview" ).load( "/site/preview" );
});
</script>
</head>
<body>
<div class="draggable><img src=//etc/> </div>
//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>
<div id="site-preview"></div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</body>
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
This appends because you try to call the droppable on a non-existing element at that moment. To solve this, you could use the callback function that can be attached to the load function and run the rest after that.
$(document).ready(function(){
$("#site-preview").load("/site/preview", function() {
// Page loaded and injected
// We launch the rest of the code
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
});
You can find other information about the load function here. The callback can take arguments and can be used, for example to check if it's a 404 or not.
Well I was able to get it to work by adding the draggable/droppable code to the ajax loaded div itself.
So the above would be amended like so
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
And those script lines would be taken out of the main page
Ajax is Asynchronous. So if you call some ajax and then call some other command, the ajax will usually finish afterwards.
This is where callbacks are useful. Try adding a callback to the ajax load call as shown here: http://api.jquery.com/load/
Something like:
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
Side note: you should probably start using scripts instead of <script> tags.

highlight or add class to parent li element in click

I am learning jquery and css.
I have menu items which look like this. You can see css,html, jquery here http://jsfiddle.net/rZR2Y/
html
<div id="nav">
<ul>
<li>Home
<ul>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog1</li>
<li>Blog2</li>
<li>Blog3</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
jquery
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > li > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('li').addClass( 'selected' );
});
});
css
#nav .selected a{background:red;display:block}
What I would like to have is, when I click sub li items ie Home1/home2/home3, then parent li ie Home should be highlighted.
I am doing something wrong in selector selection. Also, any other better solutions are also welcome.
Thanks.
UPDATE:
I am sorry, my original markup was wrong. Closing sub li should naturally come after all submenu items.
Does this now change all jquery ?
Thanks for your answers.
I would very much appreciate some explanation, so that I also learn what I am doing wrong.
UPDATE2:
After updating my markup, and also css like this
#nav .selected > a{background:red;display:block}
even my original solution works. Just learnt few css and jquery stuffs. Thanks everyone.
Updated fiddle with updated markup and css and original jquery is here
http://jsfiddle.net/rZR2Y/26/
Your selector for sub-level li elements was incorrect, it should be #nav > ul > ul > li.
Try this:
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('ul').prev().addClass( 'selected' );
});
});
Example fiddle
Given your code, you could use:
$('#nav').on('click', 'li', function () {
$('#nav li').removeClass('selected');
$(this).parentsUntil('#nav', 'li').add(this).addClass('selected');
return false;
});
Though I have my doubts that this is what you're looking for. Maybe try also changing your css to:
#nav .selected > a{background:red;display:block}
demo: http://jsfiddle.net/F8dbG/2/
updated using a the additional selector for on to reduce number of event bindings. (thanks #diEcho)
You could do
$( document ).ready( function() {
$( 'li' ).click( function() {
$( 'li').removeClass('selected' );
var $this = $( this );
$this.addClass( 'selected' );
$this.parent().prev().addClass( 'selected' );
});
});
fiddle here http://jsfiddle.net/rZR2Y/22/

Categories

Resources