I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.
I tried doing this:
$("#product_badges li:not(.on)").draggable({
// Options here
});
However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.
I therefore cannot see a way of achieving this without having several instances for the draggable property like so:
$("#product_badges li:not(.on)").each(function(){
$(this).draggable({
// Options here
}
});
With the above method I can then call the individual product_badge and disable dragging like so:
This only gets called once the item has been placed into the basket (dropped)
$('.item',$('#product_badges')).draggable('disable');
Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?
Update
See example here: http://jsfiddle.net/mB6GK/2/
use the cancel property.
$("#product_badges li").draggable({ cancel: ".no" })
fiddle:
http://jsfiddle.net/sGguz/
You could use the start event,
$("#container").draggable({
start: function( event, ui )
{ return !$(ui.helper).hasClass('nodrop'); }});
http://jsfiddle.net/mB6GK/4/
Related
having many events to manage, I opted for a select to dissect the events and drop them in the calendar, I made this <https://jsfiddle.net/max1974/mr5yxe7o/4/>
but I am faced with 2 problems .....
1 ° Initially the objects in the select drop into the calendar, but then if you select other items from the select the drop stops working.
2 ° while I drop the object from the mouse disappears and reappears only when I release it.
Could you help me please.
Please see my complete working jsfiddle:
https://jsfiddle.net/gq8eofyL/
You have to use helper() function to clone the element object inside select2 and avoid relative position hiding the element outside the select2 main <span>.
Like in this example:
helper: function(){
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}});
In addition, use Select2 events: https://select2.org/programmatic-control/events
in order to re-initialize draggables when Select2 recreates the elements, everytime you select/remove the elements (see my comment1 above):
function initSelectDraggable(){
$("ul.select2-selection__rendered li").each(function(){
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
revert: true,
revertDuration: 0,
helper: function()
{
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}
});
});
}
Thanks it works great, now the problem remains that when I drop the event I lose data-id, data-num that I would need to save them in the DB and the event remains blue in the calendar instead of the chosen color.
Thanks again to everyone jsfiddle.net/max1974/bmqdax0f/57/
I have taken the customized plugin which gives the feature for optgroup which is given over here Add scroll position return on select1. Add optgroup capability
Customized bootstrap-duallistbox (with optgroup feature)
I have created a sample example in plunker which shows a running example. The option group is working fine but the issue is that even through when I put move-on-select="false" still Item is moving on mouse click.
Can anyone please tell me why this is behaving like that
Working Plunker
<select ng-model="modal.selectedItems"
ng-options="item.name group by item.app for item in modal.allItems"
multiple
bs-duallistbox
move-on-select=false
></select>
Honestly, the easiest solution is just to change the implementation of selectGroup. I think it should be this:
function selectGroup(e) {
if(e.data.dlb.settings.moveOnSelect) {
move(e.data.dlb);
}
e.preventDefault();
}
You'll probably want to make a similar change to unselectGroup. The current implementation has strange behavior, where it moves things that aren't selected since it never unselects anything properly.
Edit:
The way that selections are made is faulty. I have no idea of the author's intent, but I suspect this implementation is closer to what a user would expect:
function selectGroup(e) {
if (e.target.tagName != 'OPTGROUP') return;
$(this).find('option').each(function (index, item) {
var $item = $(item);
if (!$item.data('filtered1')) {
if (!$item.prop('selected')) {
$item.prop('selected', true);
} else {
$item.removeAttr('selected');
}
}
});
if(e.data.dlb.settings.moveOnSelect) {
move(e.data.dlb);
}
e.preventDefault();
}
Again, make a similar change to unselectGroup. In the original code, the problem was that when you click on an individual option, the click would bubble up to the optgroup, hence the if guard. Also, the selection state should not be changed directly. That is already handled in the move function. It's much nicer to change the selected attribute, which the the move function later digests. In this way, it's also visually clear what is actually being selected. Thus, when you click an optgroup, it should toggle selected on each the item properties. You may want to modify how the removal of selected attribute is done.
Go with
http://www.virtuosoft.eu/code/bootstrap-duallistbox/
as #prakash Said in Commments.
I have a menu that is displayed when a user hovers over an anchor tag with a certain class. The same menu is always displayed, but the anchor tags have a different "accNum" attribute. I want to get the value of the accNum attribute from the "parent" element that displayed the menu and append it to the click event of one of the menu items. Something like;
Actions
Actions
Actions
<div id="ActionsMenu" style="display:none;">
Show Account
</div>
Whichever 'ActionLink' is the one hovered over to display the menu, i want to take that AccNum value and create the onClick event of "ShowAccountValues" something like
onClick="showAccountValues('AccNum value of parent');"
any help would be great. Also, I assume I have to bind this to the document.ready() function for 'ActionLink' which makes sense, but i figured if i could get any of it through this that would be great.
Thank you
Firstly use jQuery to hook up your events, secondly accnum isn't a valid attribute, so use a data-* attribute like this:
Actions
Actions
Actions
<div id="ActionsMenu" style="display:none;">
Show Account
</div>
Then you can update the data attribute of the #showAccountValues link on hover of each a element:
$('.actionLink').on({
click: function(e) {
e.preventDefault();
$('#ActionsMenu').show();
},
mouseover: function() {
$('#showAccountValues').data('accnum', $(this).data('accnum'));
}
});
Then on the click of the a element in #ActionsMenu you can get the accnum:
$('#showAccountValues').click(function(e) {
e.preventDefault();
showAccountValues($(this).data('accnum'));
});
Example fiddle
this is closely related to this post:
Is there an onSelect event or equivalent for HTML <select>?
...but specifically for the Dojo ComboBox..(I am using Dojo w/ ArcGIS JSAPI).
I have three combo boxes, which populate the successors using queries triggered by the selections from the dropdown list. My problem is that if the second combobox selection remains the same, the query is not triggered. I have tried using onblur and several other events instead of onchange, and tried to reset the value of the selection in JS, but neither has worked. The value is reset but the combobox still acts as if the same value is there, so onchange does not work. I tried many of the methods in the link above, but none worked for me. As far as I can tell, my comboboxes do not generate any selectedIndex.
Any suggestions? Thanks, J
All three dijits dijit/form/Select, dijit/form/FilteringSelect and dijit/form/ComboBox subclass dijit/_HasDropDown and that adds them a property dropDown:
// dropDown: [protected] Widget
// The widget to display as a popup. This widget *must* be
// defined before the startup function is called.
dropDown: null
What you want is to listen on this dropDown widget. The problem is that in the case of ComboBox and FilteringSelect this widget dijit/form/_ComboBoxMenu gets instantiated lazily, i.e. when you open popup for the first time. So you need to hook to opening dropDown in the first place and then add onClick event listener to the dropDown:
var signal = aspect.after(comboBox, "openDropDown", function() {
comboBox.dropDown.on("click", function(node) {
console.log("value:", comboBox.get("value"));
console.log("selectedIndex:", domAttr.get(node, "item")); // <= this is not an identifier
}
signal.remove(); // remove aspect so it called only once
}
It's a bit easier when working with dijit/form/Select, because dropDown exists and you can listen to onExecute on its dropDown dijit/Menu immediately:
select.dropDown.on("execute", function() {
setTimeout(function() {
console.log("value:", select.get("value"))
});
});
See all three in action at jsFiddle: http://jsfiddle.net/phusick/Hp5jr/
I have a requirement that very closely matches this Jquery demo, which is a simple shopping cart demo. Basically I need to make two enhancements into this demo.
I need a text input alongwith with the available "products". So when I drag-drop one of the products, the text fields should be dragged along with that, which will be filled by user in the "cart" field.
I need a "cross" in front of each item in cart, which can be used to delete a certain item. Jquery's "destroy" function doesn't seem to do that. So how can I accomplish deletion of items from shopping cart?
Thanks for all the help.
You can specify your own "helper" on the draggable definition. Whatever html you specify as your helper is what will be shown during the drag animation. In your sortable (the drop area in the demo) you can override the beforeStop function. In there you can replace the item with whatever you want to be actually dropped into your shopping cart. In that, you could add the X button with javascript or something to remove the item
I recently implemented this to drag from a datatable into a list, so had to convert the tr into an li. It works in jQuery 1.4 but I get strange results on the drop when I drag out of the top in 1.5, and I haven't resolved that yet. Here's my helper defintion
helper: function() {
var text = this.children[0].innerText;
var result = "<li id='"+this.id+"'>"+text+"</li>";
return result;
},
and here's my beforeStop function
beforeStop: function( event, ui ) {
var id = ui.helper.attr( "id" );
var text = ui.helper.text();
var li = "<li id='"+id+"'>"+text+"</li>";
$(ui.item).replaceWith( li );
}