How to drag and drop multiple elements between different tabs

How to drag and drop multiple elements between different tabs - javascript

I am trying to drag and drop multiple elements between different tabs.
in this jsfiddle, When an item is being dragged, i want to drag all other checked items along with it, like Gmail does when you move several email from inbox to another folder.
I think it is necessary to use ui.helper but i don't have enough skill in query.
following is the code i'm currently working with:
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});

After a lot of fiddling, I came up with the following based on my answer here
Basically we save the selected items using data(), Initialize the tabs as droppable() and append the selected items into the sortable on drop event.
$('.connectedSortable').on('click', 'input', function() {
$(this).parent().toggleClass('selected');
});
$("#sortable1, #sortable2").sortable({
revert: 0,
helper: function(e, item) { //create custom helper
if (!item.hasClass('selected')) item.addClass('selected');
// clone selected items before hiding
var elements = $('.selected').not('.ui-sortable-placeholder').clone();
//hide selected items
item.siblings('.selected').addClass('hidden');
return $('<ul/>').append(elements);
},
start: function(e, ui) {
var $elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
//store the selected items to item being dragged
ui.item.data('items', $elements);
},
stop: function(e, ui) {
//show the selected items after the operation
ui.item.siblings('.selected').removeClass('hidden');
//unselect since the operation is complete
$('.selected').removeClass('selected');
$(this).find('input:checked').prop('checked', false);
}
});
var $tabs = $("#tabs").tabs(),
$tab_items = $("ul:first li", $tabs).droppable({
accept: "ul, .connectedSortable li",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var $item = $(this),
$elements = ui.draggable.data('items'),
$list = $($item.find("a").attr("href")).find(".connectedSortable");
ui.draggable.show().hide("slow", function() {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow").before($elements.show("slow"));
});
}
});
ul {
list-style-type: none;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.chbox {
margin-right: 10px;
}
.selected {
background: red !important;
}
.hidden {
display: none !important;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt
</li>
<li>Proin dolor
</li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 1</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 2</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 3</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 4</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
</div>
</div>
Updated Fiddle

Related

remove with jquery not in parents

How to remove all <li> tags ( ul.gallery li ) when click on the <button>.
The Button is outside the <ul>.
<div class="gallery">
<ul class="gallery-list">
<li>
<img src="sample">
</li>
<li>
<img src="sample">
</li>
<li>
<img src="sample">
</li>
</ul>
<button class="button"></button>
</div>
jQuery
jQuery('.button').on( 'click', function( e ) {
e.preventDefault();
jQuery(this).parents( '.gallery li' ).animate( { opacity: 0 }, 300,function() {
jQuery(this).remove();
});
});
Thanks in advance,

try like this:
jQuery('.button').click(function(e){
e.preventDefault();
jQuery('.gallery .gallery-list li').remove();
});
or like this according to your code :
jQuery('.button').on( 'click', function( e ) {
e.preventDefault();
var gallery = jQuery(this).parents( '.gallery' );
jQuery(gallery).animate( { opacity: 0 }, 300, function() {
jQuery(".gallery-list li", jQuery(gallery)).remove();
});
});

As you are looking for removing all the li elements under the class gallery-list. You can try as below -
jQuery('.button').on('click', function(e) {
e.preventDefault();
jQuery('.gallery-list > li').animate({
opacity: 0
}, 300, function() {
jQuery(this).remove();
});
});

Bootstrap dropdown not closing on clicking outside

In my application I have added close button side bootstrap dropdown.
Clicking on that close button I have to close that dropdown.
This is working properly, but when I click anywhere outside dropdown, dropdown is not closing
Here is Fiddle : goo.gl/3RAkBw
Can any one tell me how can I close

You can try this:
$(document).on('click',function(){
$('#layers').hide();
})

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' );
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button onclick="$('#layers').toggle();" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul id="layers" class="dropdown-menu" role="menu">
<span><img class="close_img dropdown-toggle" onclick="$('#layers').toggle();" data-toggle="dropdown" src="https://www.eonenergy.com/images/icons/close.gif" alt="CloseWindow" title="Close" style="margin-top:5px;margin-right:5px" /></span>
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
<br/><br/>
You can set click event on window like, (if you have to hide only on click of anywhere on window)
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' ); //$( '#layers' ).hide();
});

Simply use the below jquery code
$(document).click( function () {
$("#layers").css("display", "");
});
or use
$(document).click( function () {
$("#layers").toggle();
});

"show" class is added when the dropdown is clicked so to hide the dropdown menu you have to remove it:
$(document).on('click',function(){
$('#user-menu').removeClass('show');
})

Change color of dropped item and limit item after its dropped in jquery

I want to change color of the item after it is dropped into cart and then not allow user to drop this item again. Here is code of my accordion:
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h3>T-Shirts</h3>
<div>
<ul>
<li class='ui-state-highlight'>Lolcat Shirt</li>
<li class='ui-state-highlight'>Cheezeburger Shirt</li>
<li class='ui-state-highlight'>Buckit Shirt</li>
</ul>
</div>
<h3>Bags</h3>
<div>
<ul>
<li class='ui-state-highlight'>Zebra Striped</li>
<li class='ui-state-highlight'>Black Leather</li>
<li class='ui-state-highlight'>Alligator Leather</li>
</ul>
</div>
<h3>Gadgets</h3>
<div>
<ul>
<li class='ui-state-highlight'>iPhone</li>
<li class='ui-state-highlight'>iPod</li>
<li class='ui-state-highlight'>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</div><!-- End demo -->
<script>
$(function() {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text())
.addClass("cart-item")
.appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
$("#catalog ul").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
},
hoverClass: "ui-state-hover",
accept: '.cart-item'
});
});
</script>
Here is fiddle, i am able to drag and drop items, however i would like to add some functions like changing color of item in accordion being dropped to droppable area, and also not allow user to drop the same item twice. Any ideas how it can be done? Thanks in advance. Here is fiddle: http://jsfiddle.net/andrewwhitaker/t97FE/?utm_source=website&utm_medium=embed&utm_campaign=t97FE

Note: - i use 1.12.1 jQuery-UI and 1.12.4 jQuery
Script:
<script>
$(function() {
var itm = [];
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
var zz = ui.draggable.text()
var xyz = itm.includes(zz);
if(xyz===false){
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text())
.addClass("cart-item")
.appendTo(this);
//add to array
itm.push(zz);
//add style
$('.ui-droppable').find("li.ui-draggable:contains('"+zz+"')").addClass('bred');
}else{
alert('Item Already Exist');
}
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
$("#catalog ul").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
var zz = ui.draggable.text()
$('.ui-droppable').find("li.ui-draggable:contains('"+zz+"')").removeClass('bred');
var indexItm = itm.indexOf(zz);
if (indexItm > -1) {
itm.splice(indexItm, 1);
}
},
hoverClass: "ui-state-hover",
accept: '.cart-item'
});
});
</script>
and CSS:
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
.cart-item{color:green;font-weight:bolder}
.bred{color:red;}
</style>
hope this help.

JQuery - Unable to filter using isotope js woocommerce products

I have written a function to filter the woocommerce products using isotope js. I am trying to sort out the problem. But the filter is not working.
The HTML looks like
<div class = "filters">
<input type="checkbox" class = "do_this_filter" value=".Hand-Wash">Hand wash<br>
<input type="checkbox" class = "do_this_filter" value=".Machine-Wash">Machine wash<br>
</div>
<ul class ='products'>
<li class="items Hand-wash"></li>
<li class="items Machine-Wash"></li>
</ul>
The jQuery I used is
$( function() {
// init Isotope
var $grid = $('.products').isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
// bind filter click
$('.do_this_filter').on( 'click', function() {
var filterValue = $( this ).val();
// use filterFn if matches value
$grid.isotope({ filter: filterValue });
});
// change is-checked class
$('.do_this_filter').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
This didn't work can anyone help.? Thanks in advance.
Jsfiddle

Try like this:
$(function() {
// init Isotope
var $grid = $('.products'),
$checkboxes = $('.filters input');
$grid.isotope({
itemSelector: '.items',
layoutMode: 'fitRows'
});
$checkboxes.change(function() {
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function() {
filters.push(this.value);
});
filters = filters.join(', ');
$grid.isotope({
filter: filters
});
});
});
.items {
width: 100px;
height: 100px;
background: red;
margin: 3px;
list-style: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="filters">
<input type="checkbox" class="do_this_filter" value=".Hand-wash">Hand wash
<br>
<input type="checkbox" class="do_this_filter" value=".Machine-Wash">Machine Wash
<br>
</div>
<ul class='products'>
<li class="items Hand-wash">Demo product1</li>
<li class="items Machine-Wash">Demo product2</li>
</ul>

Jquery drag resize select

I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine .
JSFiddle
My code is:-
CSS-
.dr {
background: none repeat scroll 0 0 #63F;
color: #7B7B7B;
height: 50px;
text-shadow: 1px 1px 2px #FFFFFF;
width: 50px;
position:absolute;
}
.bg_section {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
position: relative;
width: 400px;
}
JS-
$(document).ready(function(){
var selected = $([]), offset = {top:0, left:0};
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$( "."+section).selectable();
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$(".dr").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
},
stop: function(e, ui) {
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(e) {
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( ".dr" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( ".bg_section" ).data(".bg_section")._mouseStop(null);
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})
HTML-
<div id="dialog-form" title="Add fields in Section">
<p class="validateTips">All form fields are required.</p>
<div class="add_new">Add</div>
<input type="text" id="new_field"/>
<div id="save_new">save</div>
<form>
<fieldset>
<label for="divdata">Divs</label>
<select name="divdata" id="divdata">
<option value="dr1">Div1</option>
<option value="dr2">Div2</option>
<option value="dr3">Div3</option>
<option value="dr4">Div4</option>
<option value="dr5">Div5</option>
</select>
</br>
<label for="section">Section</label>
<select name="section" id="section">
<option value="paper-area">Header</option>
<option value="paper-area-detail">Detail</option>
<option value="paper-area-qty">Items</option>
<option value="paper-area-sub">Total</option>
<option value="paper-area-footer">Footer</option>
</select>
</fieldset>
</form>
</div>
<div class="main_bg">
<div class="textarea-top">
<div class="textarea-field">
<div class="field-icon add"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></div>
</div>
<div class="paper-area bg_section" id="paper_area">
</div>
<div class="paper-area-detail bg_section">
</div>
<div class="paper-area-qty bg_section">
</div>
<div class="paper-area-sub bg_section">
</div>
<div class="paper-area-footer bg_section"></div>
</div>
I am using drag-select for drag resize.Any help should be Appreciated.

Seems like a strange bug/conflict with jquery ui dragable and/or resizeable. Only some parts of selectable are working in combination with these other two functions. If you inspect the elements which have all three functions and you try to select one of them it only gets the "ui-selecting" class, which is a timeout class and option from selectable but stoping there. Normally the classes are replaced in this way:
ui-selectee
ui-selecting
ui-selected.
If you remove the drag- and resizeable functions the selectable stuff is working normally (but there still other bugs in your code)
I guess it is possible to combine all these function, but you will have to play around with the options and callbacks to get it working like you want to. Maybe not everything you want is possible becouse of these conflicts.

The easiest way to resize is by using resize:both; , max-height:__px; , max-width:__px; in CSS

Indeed it seems that jquery ui draggable and selectable don't work that nice together. However other people have posted solutions. Please look at the following,
http://words.transmote.com/wp/20130714/jqueryui-draggable-selectable/
http://jsfiddle.net/6f9zW/light/ (this is from the article above)
Since it seems as a nice working solution that examines the state when dragging and selecting, i will also post it below in case the site goes down.
JS
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#selectable > div" ).draggable({
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#selectable > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#selectable" ).selectable();
// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("selectable")._mouseStop(null);
});
// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
$(this).css({
top: i * 42
});
i++;
});
CSS
#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
HTML
<div id="selectable">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
</div>
Other threads describing similar problem and solutions,
Is there a JQuery plugin which combines Draggable and Selectable
jQuery UI : Combining Selectable with Draggable

I have found A solution Now we can use *Drag-Resize-Select -*together
Example-
code:-
CSS:-
.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
JS:-
var selected = $([]); // list of selected objects
var lastselected = ''; // for the shift-click event
$(document).ready(function(){
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
selected = $(".ui-selected").each(function() {
$(this).addClass("dragging");
});
},
drag: function(ev, ui) {
},
stop: function(e, ui) {
selected.each(function() {
$(this).removeClass("dragging");
});
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
$("#paper_area").selectable();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(evt) {
id = $(this).attr("id");
// check keys
if ((evt.shiftKey) && (lastselected != '')) {
// loop all tasks, select area from this to lastselected or vice versa
bSelect = false;
$(".task").each(function() {
if ($(this).is(':visible')) {
if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
bSelect = !bSelect;
if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
if (!$(this).hasClass("ui-selected"))
$(this).addClass("ui-selected");
}
else
$(this).removeClass("ui-selected");
}
});
return;
}
else if (!evt.ctrlKey)
$(".ui-selected").removeClass("ui-selected"); // clear other selections
if (!$(this).hasClass("ui-selected")) {
$(this).addClass("ui-selected");
lastselected = id;
}
else {
$(this).removeClass("ui-selected");
lastselected = '';
}
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})

Develop Reference

JavaScript is the programming language of the Web.

How to drag and drop multiple elements between different tabs - javascript

Related

remove with jquery not in parents

Bootstrap dropdown not closing on clicking outside

Change color of dropped item and limit item after its dropped in jquery

JQuery - Unable to filter using isotope js woocommerce products

Jquery drag resize select

Categories

Resources