I've got a little drag and drop app which i've built. It's working OK, but there is a slight issue where I drag on the item to the droppable location.
It should get the text from the HTML (which is does) and update another div to show the user what they've dragged in.
Unfortunately, it always returns the same name, no matter which list item you drag. This is the first in the list, so the first instance of that class.
Anyway we can get the correct label for the item dragged?
Here is my jQuery
$(function() {
$( ".drag_me" ).draggable({ revert: "invalid" });
$( ".choc2_bowl" ).droppable({
drop: function( event, ui ) {
$( this )
var htmlString = $('.choc_label').html();
$('.choc2_flavour').text( htmlString );
ui.draggable.fadeOut(500);
}
});
});
An here is the list in my HTML (this is shortened for this demo, but the list is dynamic from a DB.
<div class="choc2_select">
<ul>
<li class="drag_me"><div ><img src="RASPBERRY.png" /></div><div class="choc_label">Raspberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Strawberries</div></li>
<li class="drag_me"><div ><img src="DRIED-BLUEBERRIES.png" /></div><div class="choc_label">Blueberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Cranberries</div></li>
</ul>
</div>
Any help would be greatly appreciated!
Simon
You need to target the choc_label inside the dragged element so use
$(".choc2_bowl").droppable({
drop: function (event, ui) {
var htmlString = ui.draggable.find('.choc_label').html();
$('.choc2_flavour').text(htmlString);
ui.draggable.fadeOut(500);
}
});
Related
I have an unordered list in one div and I want to achieve that when I drag and drop any of these list items into another div element, I want a new div to be created inside an old div with this list item inside, so that I could add new tags in these new divs. I am using JQuery draggable and droppable widget. How can I do this?
Here is my script:
<script type="text/javascript">
$(document).ready(function(){
$('#source li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#divCountries').droppable({
accept : 'li[data-value="country"]',
drop : function(event, ui){
$(this).append(ui.draggable);
return '<div>' + $(this).text() + '</div>'
},
});
$('#divCities').droppable({
accept : 'li[data-value="city"]',
drop : function(event, ui){
$(this).append(ui.draggable);
return '<div>' + $(this).text() + '</div>'
},
});
});
</script>
And this is my body tag:
<body style="font-family: Arial">
<form id="form1" runat="server">
<div class="divClass">
Countries & Cities
<ul id="source">
<li data-value="country">USA</li>
<li data-value="country">Germany</li>
<li data-value="country">UK</li>
<li data-value="city">New York</li>
<li data-value="city">Berlin</li>
<li data-value="city">London</li>
</ul>
</div>
<div class="divClass" id="divCountries">
Countries
</div>
<div class="divClass" id="divCities">
Cities
</div>
</form>
My guess is that you will need to edit the ui.draggable element.
Something like
var item = $(ui.draggable).data('test', 1);
$(this).append(item);
in the drop function. That will attach data to the element. You could also wrap it in a div which you manually create to attach the elements to instead.
var item = $('<div data-test="foo">').append(ui.draggable);
$(this).append(item);
I am developing a Tree view and using JQuery Draggable and Droppable plugins to implement Drag and Drop the tree nodes.
I can drag a folder and drop over another and get the dropped element in "drop" event handler. In my drop event handler I will rearrange my nodes.
HTML Code:
<ul class="dragul">
<li class="dragli" id="1"><a class="draga">Folder1</a>
<ul class="dragul">
<li class="dragli" id="11"><a class="draga">Folder11</a> </li>
</ul>
</li>
<li class="dragli" id="2"><a class="draga">Folder2</a> </li>
<li class="dragli" id="3"><a class="draga">Folder3</a> </li>
<li class="dragli" id="4"><a class="draga">Folder4</a> </li>
<li class="dragli" id="5"><a class="draga">Folder5</a> </li>
</ul>
JS Code:
$( ".draga" ).draggable({
cursor: "pointer",
cursorAt: { top: 12, left: 18 },
helper: function( event ) {
var temp_name = event.target.innerHTML;
return $( "<div id='draghelper' class='ui-widget-header drag-helper'>"+temp_name+"</div>" );
}
});
$( ".draga" ).droppable({
drop: function( event, ui ) {
// On dropping on a node will handle here to rearrange the node.
},
});
Now I also need to drag a node and drop in between two nodes. Like need to drag "Folder5" and drop in between "Folder2" and "Folder3".
I also need to show a helper to drop in between two nodes when the dragged hover is in between the nodes.
JSBIN - Link
I have tried a lot of examples done and I cannot get my code to work to get the ID of a selected tab
http://pastebin.com/A5cqQS61
js code:
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
console.log($(ui.tab)); // the tab selected
console.log(ui.index);
},
show: function(event, ui) {
console.log($(ui.tab)); // the tab shown
console.log(ui.index);
}
});
});
HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>text1</p>
</div>
<div id="tabs-2">
<p>text2</p>
</div>
<div id="tabs-3">
<p>text3</p>
</div>
</div>
I put in pastebin, because I don't understand ow the code block works in stack! I've pressed space four times, never seems to work well.
I have looked at these solutions so far:
jquery tab selected
jQuery tabs - Get the index of previously selected tab
jQuery tabs - Get the index of previously selected tab
Get tab selected Id in jQuery UI 1.9
You should use ui.panel , returning div tab element: {if it's what you are looking for?}
SEE DEMO
$(function () {
$('#tabs').tabs({
select: function (event, ui) {
console.log(ui.panel.id);
console.log(ui.index);
},
show: function (event, ui) {
console.log($(ui.panel));//jq object
console.log(ui.panel.id);
console.log(ui.index);
}
});
});
Please, try this one — note the different event name('activate') and usage of different property of ui object:
$(function() {
$('#tabs').tabs({
activate: function(event, ui) {
console.log(ui.newPanel[0].id);
}});
});
I usually do the bootleg way... $('#tabs li.active'). This will give you the active li under the element with id='tabs'. If you can get the element, also... jQuery allows you do something like this... $(element).
From there you can do var ID=$(element.attr('id');
I got a small problem in JQuery .selectable function
what I wanna do is bind some events to each tabs.
I can handle a click event of each tabs
but the problem is when I select two or more tabs,
I can't figure out how I handle it.
for example, if I click(and also just select by dragging) one tab,
some sorting function must be works and
also each different defined function must be works in dragging multiple selections.
Ofcourse, I can use some flag cheat to solve this
but that is not what I really want.
does anyone have some effective solutions?
$("#selectable2").selectable(
{
selected: function()
{
$(".arcplan").on("selectableselected", function()
{
$(".big-tile").hide(200);
})
}
});
<div class="menu">
<div class="inner">
<ol id="selectable2">
<li class="alltype2">all</li>
<li class="arcplan">Arcplan</li>
<li class="msbi">MSBI</li></li>
<li class="excel">Excel</li>
<li class="etc">etc</li>
</ol>
</div>
</div>
Try
$("#selectable2").selectable({
selected : function(event, ui) {
if($(ui.selected).hasClass('arcplan')){
$(".big-tile").hide(200);
}
}
});
Demo: Fiddle - when you click on Arcplan the big-tile element is hidden and if you select anything else it is displayed back.
From the docs (http://api.jqueryui.com/selectable/#event-selected):
$('#selectable2').selectable();
$('#selectable2').on('selectableselected', function(event, ui){
doSomethingWithTheSelected(event.target);
});
I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.
Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)
When I drag from one category / list to another I am always given the former ID..
For example:
CAT 1 ------------ CAT 2
If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...
I have added my codes below:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
LIST HTML:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
Any help would be appreciated.
Thank you in advance!
What you want is here:
http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
Placing your code in the stop callback will allow you check the right ID.
Event that you need to handle is received.
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event.
received will fire only in case you drag to another list.
stop will fire even if you leave item in the same list.