The Drag works properly in the first division but is not working properly in the next one. I need to get it working without changing the div Id/Class name.
Fiddle here: JS Fiddle
HTML:
<div class="track">
<div id="rocket">
</div>
</div>
<br><br><div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
CSS:
.track {
height: 400px;
width: 48px;
overflow: hidden;
margin: 10px 0 0 10px;
float:left;
background: #ccc;
}
#rocket{
height:48px;
width:48px;
background: url('http://cdn1.iconfinder.com/data/icons/Symbolicons_Transportation/48/Rocket.png');
position:relative;
top:352px;
}
Jquery :
$(document).ready(function() {
$('.track').each(function(){
//rocket drag
$(this).children("#rocket").draggable({
containment: ".track",
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});
here is the fiddle...
http://jsfiddle.net/zHyA9/30/
1) id should always be unique... so chnaged ur ids to class..
2) added containment: $(this), in ur draggable class
You need to change some thing in html code.
<div class="track">
<div id="rocket">
</div>
</div>
<div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
Here the fiddle: fiddle
You need several changes in your html as well as js code.
Refer this fiddle.
JS:
$(document).ready(function() {
$('.track').live("hover",function(){
//rocket drag
$(this).children(".rocket").draggable({
containment: this,
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});
Related
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.
I am trying to make a flowing-down div. I have the following jQuery code for them:
$(".centered-wrapper>main>.event").hoverIntent({
over: function() {
var pos = $(this).position();
$presentationEvent = $(this);
$fullEvent = $(this).clone();
$fullEvent.addClass("full");
$(this).css("visibility", "hidden");
$fullEvent.css({
position: "absolute",
top: pos.top,
left: pos.left
});
$(".centered-wrapper>main").append($fullEvent);
$fullEvent.find("main").slideDown(50, function() {
$fullEvent.find("footer").slideDown(50);
});
$fullEvent.animate({boxShadow: "0px 5px 5px 0px rgba(0,0,0,0.5);"}, 100);
console.log( $(".centered-wrapper>main>.event.full"));
$(".centered-wrapper>main>.event.full").on("mouseout", function() {
$(this).find("main, footer").slideUp(100);
$(this).remove();
$presentationEvent.css("visibility", "visible");
});
},
out: function() {}
});
Everything works well until I move my cursor up and down on that element, because, then it flickers and appears and disappears...
<div class="event">
<header>
<img class="photo" src="/res/users/events-photos/bal.jpg" alt=""/>
<div class="event-card">
<div class="date">
<!-- content -->
</div>
</header>
<main>
<!-- content -->
</main>
<footer>
<!-- content -->
</footer>
</div>
How can I solve this problem and where am I wrong?
You need to disable multiple queued animations. The best way to achieve this is to stop() it.
http://api.jquery.com/stop/
According to documentation:
$( "#hoverme-stop-2" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
});
In your case:
$fullEvent.find("main").stop(true,true).slideDown(50, function() {
$fullEvent.find("footer").stop(true,true).slideDown(50);
});
and:
$(this).find("main, footer").stop(true,true).slideUp(100);
The visibility hidden code interferes with element hover and causes the flicker. Use another way to hide it. Like
.event:hover
{
opacity: 0;
}
To avoid events from firing use 'pointer-events: none;'
.event:hover
{
opacity: 0;
pointer-events: none;
}
My Code in Fiddle: http://jsfiddle.net/wguan/7yMSz/
The current code allows one to drag and drop between two div boxes. But I was wondering how to auto sort by default so that when i drag between the boxes, both will automatically sort from smallest number on top to largest number at the bottom.
HTML
<div id="boxes_holder" class="initBox">
<div draggable="true" class="boxes" style="text-align:center;">1</div>
<div draggable="true" class="boxes" style="text-align:center;">2</div>
<div draggable="true" class="boxes" style="text-align:center;">3</div>
<div draggable="true" class="boxes" style="text-align:center;">4</div>
</div>
<div id="dragBox" class = "initBox">
<div id="dragBoxTitle" class = "">Box</div>
</div>
CSS:
#boxes_holder{
width:100px;
height:100px;
border:0px;
display: inline-block;
float: left;
vertical-align:top;
background-color:#FBFBFB;
list-style-type: none;
}
#dragBox{
width:100px;
height:100px;
border:0px;
display: inline-block;
float: right;
vertical-align:top;
background-color:#FBFBFB;
list-style-type: none;
}
Javascript:
$(document).ready(function () {
$('#boxes_holder, #dragBox').sortable({
connectWith: '.initBox',
//Whenever Dropped Item
receive: function (event, ui) {
if ($(this).children().length > 4) {
if ($(this).attr('id') == 'dragBox') {
$(ui.sender).sortable('cancel');
}
}
}
});
});
My Actual HTML Code with PHP below (doesn't seem to work):
<div id = "boxes_holder" class = "initBox">
<?php
//Creates 49 BOXES elements
$x = 49;
for($i=1; $i<=$x; $i++){
echo '<li><span class = "boxes" style="text-align:center;float:left;margin:10px;" > '.$i.'</span></li>';
}
?>
</div>
<div id="dragBox" class = "initBox">
<div id="dragBoxTitle" class = "">
Pick Your Numbers:
</div>
</div>
Following will sort the elements after the drop.
$('#boxes_holder, #dragBox').sortable({
connectWith: '.initBox',
//Whenever Dropped Item
receive: function (event, ui) {
$(this).find('div.boxes').sort(sortAlpha).appendTo(this);
if ($(this).children().length > 5) {
if ($(this).attr('id') == 'dragBox') {
$(ui.sender).sortable('cancel');
}
}
}
});
function sortAlpha(a,b){
return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
}
Check the unfiddle. http://jsfiddle.net/nsjithin/7yMSz/1/
Edit : So it need to sorted whenever, the position changed, sorted or dragged/dropped. You need to put it in the update event handler.
$('#boxes_holder, #dragBox').sortable({
connectWith: '.initBox',
update: function( event, ui ) {
$(this).find('div.boxes').sort(sortAlpha).appendTo(this);
},
//Whenever Dropped Item
receive: function (event, ui) {
if ($(this).children().length > 4) {
if ($(this).attr('id') == 'dragBox') {
$(ui.sender).sortable('cancel');
}
}
}
});
Edit 2 : Working with the <li> html structure.
$('#boxes_holder, #dragBox').sortable({
connectWith: '.initBox',
update: function( event, ui ) {
$(this).find('li').sort(sortAlpha).appendTo(this);
},
//Whenever Dropped Item
receive: function (event, ui) {
if ($(this).children().length > 4) {
if ($(this).attr('id') == 'dragBox') {
$(ui.sender).sortable('cancel');
}
}
}
});
function sortAlpha(a,b){
return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
}
Jsfiddle : http://jsfiddle.net/nsjithin/7yMSz/3/
I'm using jquery re-sizable textarea. Everything is working fine but on left click it does not focus the textarea. Right click work for focus and cursor movement but left click isn't working. I want to focus the textarea by left click or click.
JSFiddle
HTML:-
<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
<textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
JS:-
$(function () {
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
cancel: "text",
containment : "parent",
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
})
});
CSS:-
div {
float: left;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border:3px solid;
}
The issue is because the entire div is used for dragging, so the click event is stopped from bubbling to the textarea. You need to use a handle to do the dragging instead. Try this:
$('.drag-item').draggable({
handle: '.drag-handle',
// other settings...
})
<div class="drag-item item-txt txt-static">
<div class="drag-handle"></div>
<textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>
Note you can make the .drag-handle appear however you need, I just made my example for speed.
Example fiddle
use this JS:
$(function () {
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
cancel: "text",
containment : "parent",
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
});
$('.drag-item').click(function(){
$("#text").focus();
});
});
Working for me in fiddle.
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();
});
})