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.
Related
I have a dynamic webpage where i use Jquery "draggable" & "droppable".
I'm trying to move one element from one "parent" to another.
When i do "console.log" i can see that the element has a new parent.
But When i later on add more HTML content to the DOM, the element won't move with it's new parent. It's stuck to the "document" offset position.
How can i solve this?
FIDDLE
https://jsfiddle.net/0apuqnxd/13/
JS
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
//Detach element from DOM
draggable.detach();
//Append element to droped position and into new parent?
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
How about this?
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
registDroppable();
$(".flakUp .elementsDiv").each(function(e) {
$(this).css({"top": $(this).offset().top+$(".flakUp").height()});
});
})
function registDroppable() {
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
}
registDroppable();
https://jsfiddle.net/ChaHyukIm/0apuqnxd/15/
I just changed three things and it seems working:
1) added ID and class when you add new Div:
a)id="12" - Hardcoded to Test you can change later
b) class="ui-droppable" added
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div id='12' class='flakUp ui-droppable '>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
2). I gave different ID=100 instead of 1.
Because i saw another div with id="1"
<div id="dropZones">
<div class='flakUp' id="100">DropZone 1</div>
</div>
Full Code:
HTML
<div class="row well">
<button class="btn btn-primary" id="btnAddDropZone">Add dropZone</button>
</div>
<div id="dropZones">
<div class='flakUp' id="100">DropZone 1</div>
</div>
<hr>
<div class="elementsDiv" id="1" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div>
<div class="elementsDiv" id="2" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div>
<div class="elementsDiv" id="3" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div>
Script
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div id='12' class='flakUp ui-droppable'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
var offset = $(this).offset();
var relX = event.pageX - offset.left;
var relY = event.pageY - offset.top;
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
I'm having trouble getting the id of the outer div the draggable element is being taken from.
Here is my HTML
http://dev.eteacher.online/taskAssets/cup.jpg'/>
///Droppables ".snap"
<div id="0" class='col-word'><p class="letters">c</p></div>
<div id="1" class='col-word snap' style=""><p class="letters">__</p></div>
<div id="2" class='col-word snap' style=""><p class="letters">__</p></div>
///Draggables
<div id="comparison">
<div id="v" class='col-letter'><p class="letters">v</p></div>
<div id="p" class='col-letter'><p class="letters">p</p></div>
<div id="u" class='col-letter'><p class="letters">u</p></div>
</div>
Then I have the important jQuery
var beh = new Array();
var beh2 = "";
var MyVar = "";
$(".col-letter").draggable({ cursor: 'move', snap: '.snap',
revert : function(event, ui) {
// on older version of jQuery use "draggable"
// $(this).data("draggable")
// on 2.x versions of jQuery use "ui-draggable"
// $(this).data("ui-draggable")
$(this).data("ui-draggable").originalPosition = {
top : 0,
left : 0
};
// return boolean
return !event;
// that evaluate like this:
// return event !== false ? false : true;
},
drag: function(event, ui){
if($(this).data('droppedin')){
$(this).data('droppedin').droppable('enable');
$(this).data('droppedin',null);
$(this).removeClass( 'dropped' );
MyVar = $(this).closest(".col-word").attr("id");
alert(MyVar);
beh[MyVar] = "";
alert(beh);
}
}
});
$(".snap").droppable({
hoverClass: 'hovered',
tolerance: 'pointer',
drop: function(event, ui) {
var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left;
var top_end = drop_p.top - drag_p.top ;
ui.draggable.animate({
top: '+=' + top_end,
left: '+=' + left_end
});
ui.draggable.addClass( 'dropped' );
ui.draggable.data('droppedin',$(this));
$(this).droppable('disable');
}
});
$( ".snap" ).on( "drop", function( event, ui ) {
MyVar = $(this).parent().attr('id');
beh[MyVar] = ui.draggable.attr('id');
alert(beh[MyVar] + " " + MyVar);
// alert(beh);
//beh[] = new Array($(this).attr('id'), ui.draggable.attr('id'));
//alert(beh);
});
Basically you can drag divs in and out of the .snap class. I want to get the id of the .snap class when I drag the divs off of the .snap.
I'm having trouble doing this. The closest function is bringing me undefined!
Any ideas?
EDIT Goal: The goal is to know which id for each col-letter gets placed on which .snap class.
The way to I thought it out was to have a get request once a button is pressed such that the position and the letter are provided.
For example, if you place id=v on id=1. the get request will enable /1v.
EDIT 2
This worked!
$(".snap").on("drop", function(event, ui) {
MyVar = ui.helper.attr('id');
beh[MyVar] = $(this).attr('id') + ui.helper.attr('id');
alert(beh[MyVar]);
});
But it makes my join command stop working!
$( "#done" ).click(function(){
beh2 = beh.join("");
var link = "/task/fillLetters/response/"+ beh2;
alert(beh2);
window.location.replace(link);
});
Any ideas?
I think this is what you need
fiddle link https://jsfiddle.net/bksL352s/
var beh = new Array();
var beh2 = "";
var MyVar = "";
$(".col-letter").draggable({
cursor: 'move',
snap: '.snap',
revert: function(event, ui) {
$(this).data("ui-draggable").originalPosition = {
top: 0,
left: 0
};
return !event;
},
drag: function(event, ui) {
if ($(this).data('droppedin')) {
$(this).data('droppedin').droppable('enable');
$(this).data('droppedin', null);
$(this).removeClass('dropped');
MyVar = $(this).attr('data-dropped-Id');
alert(MyVar);
beh[MyVar] = "";
alert(beh);
}
}
});
$(".snap").droppable({
hoverClass: 'hovered',
tolerance: 'pointer',
drop: function(event, ui) {
var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left;
var top_end = drop_p.top - drag_p.top;
ui.draggable.animate({
top: '+=' + top_end,
left: '+=' + left_end
});
ui.draggable.addClass('dropped');
ui.draggable.data('droppedin', $(this));
$(this).droppable('disable');
}
});
$(".snap").on("drop", function(event, ui) {
MyVar = event.target.getAttribute('id');
beh[MyVar] = ui.draggable.attr('id');
ui.draggable.attr('data-dropped-Id', $(this).attr('id'));
alert(beh[MyVar] + " " + MyVar);
});
.col-letter {
display: inline-block;
border: 1px solid #ccc;
background: #eee;
margin: 10px 0;
transition: background ease-In .2s;
}
.col-word.snap {
display: inline-block;
border: 1px solid #000;
background: #C5C5C5;
}
.dropped p {
background: #CDDC39 !important;
}
.dropped {
border-color: #000 !important;
}
.col-word.snap p {
margin: 0;
padding: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 1.5;
}
.col-letter p {
margin: 0;
padding: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 1.5;
cursor: move;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="0" class='col-word'>
<p class="letters">c</p>
</div>
<div id="1" class='col-word snap' style="">
<p class="letters">__</p>
</div>
<div id="2" class='col-word snap' style="">
<p class="letters">__</p>
</div>
<div id="comparison">
<div id="v" class='col-letter'>
<p class="letters">v</p>
</div>
<div id="p" class='col-letter'>
<p class="letters">p</p>
</div>
<div id="u" class='col-letter'>
<p class="letters">u</p>
</div>
</div>
Hope this helps..:)
The following will get you the id of both the dragged element and dropped element..
$(".snap").on("drop", function(event, ui) {
MyVar = $(this).attr('id');
beh[MyVar] = ui.helper.attr('id');
alert(MyVar + " " + beh[MyVar]);
});
Same goes with your drag function use
MyVar = $(this).attr('id'); //to get your id
Fiddle
https://jsfiddle.net/2a6tur6w/3/
You are after event.target in your 'drop' handler...
$(".snap").on("drop", function(event, ui) {
MyVar = $(event.target).attr('id'); // here
beh[MyVar] = ui.draggable.attr('id');
alert(beh[MyVar] + " " + MyVar);
});
fiddle: https://jsfiddle.net/zoa3wL0n/
Why can't you store the value with the onclick handler and then retrieve it when you 'drop'?
var draggedItem
$(".snap").on("drag", function(event, ui) {
draggedItem = $(this).attr('id');
});
$(".snap").on("drop", function(event, ui) {
alert(draggedItem)
});
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;
}
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();
});
})
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;
}
});
});
});