I would like to know where a sortable is in a list before it is dropped.
Once the the item is selected by the user, it is removed from the DOM. When I listen for the change event, all the item are there except for the selected item.
$( "#sortable" ).sortable('toArray')
As the user moves the selected item over the other elements, I would like to know the proposed area where the user is about to drop the object. I want to do this so that I can give more feedback to the user before they commit to dropping it.
Is there a way to get the index of a sortable before it is actually dropped?
This is possible by finding the index of the placeholder element in the change event, we do want to make sure we ignore the li element that is currently being dragged. I do this by simply adding a class, you could also use $.data(). If you do not ignore the li element that is currently being dragged you will double count since there is a placeholder and the original element in the ul at the time of change.
Code is below and here is the fiddle: http://jsfiddle.net/yYKmw/16/
HTML
<ul id="sortable">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="output">
<span></span>
</div>
CSS
#sortable {
list-style-type: none;
margin: 1em;
padding: 0;
width: 30%;
float: left;
}
#sortable li {
height: 20px;
background-color: khaki;
margin: 3px;
padding: 2px;
}
.sortable-placeholder {
background-color: red !important;
}
#output {
clear:both;
border: thin solid black;
height: 200px;
width: 200px;
color: black;
}
JS
$( "#sortable" ).sortable({
placeholder: "sortable-placeholder",
tolerance: "pointer",
start: function(event, ui) {
ui.item.addClass( 'ignore' )
},
change: function(event, ui){
var elements = $('#sortable li').not('.ignore')
, placeholderElement = elements.filter( '.sortable-placeholder' )
, index = elements.index( placeholderElement );
$('#output span').html('Current index: ' + index)
},
stop: function(event, ui) {
ui.item.removeClass( 'ignore' );
}
});
do you want something like this?
http://jsfiddle.net/6G9rY/2/
$(function() {
$( "#draggable" ).draggable();
});
$('#draggable').mousemove(function(){
var html = ["The clicked div has the following styles:"];
var styleProps = $("#draggable").css( ["top", "left", "right", "bottom"] );
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#data" ).html( html.join( "<br>" ) );
});
Related
I have a bunch of DIV's that I'm using to allow a user to drop other DIV's onto. This will be a "Fill in the Blank" kinda thing. With the droppable being the blank in the sentence and the droppable being the answers they can choose from.
The issue I'm having at the minute is currently when they drop their answer div onto the droppable div, my function removes the draggable from the draggable element, but the droppable element remains able to have more divs dropped onto it.
I was wondering how can I get this to disable the droppable div, so that once an "answer" is dropped onto it's the only thing that can be.
Here's what my function looks like currently:
function handleCardDropOne(event, ui) {
var cardValue = ui.draggable.attr('id');
ui.draggable('disable');
$(this).droppable('disable');
ui.draggable.position({ of: $(this),
my: 'left top',
at: 'left top'});
ui.draggable.draggable('option', 'revert', false);
};
$(function() {
//Drag 1
$( "#draggable" )
.draggable({ snap: "#snap-one", snapMode: "inner", snapTolerance: 5 });
//Drag 2
$( "#draggable2" )
.draggable({ snap: "#snap-two", snapMode: "inner", snapTolerance: 5 });
//Drop 1
$( "#snap-one" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
var top = $('#draggable').css('top')
,left = $('#draggable').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
if ($('#draggable').hasClass('ui-draggable-disabled')){
alert('hello');
}
}
}
}
});
//Drop 2
$( "#snap-two" ).droppable({
accept: "#draggable2",
drop: function( event, ui ) {
var top = $('#draggable2').css('top')
,left = $('#draggable2').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
}
}
}
});
});
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.snap {
width: 80px;
height: 80px;
margin: 0 10px 25px 0;
float:left;
}
.ui-state-highlight{
background-color:yellow;
color:#000;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="snap-one" class="snap ui-widget-header" style="background: #ffc36a;">AAA</div>
<div id="snap-two" class="snap ui-widget-header" style="background: #ffc36a;">BBB</div>
<div class="demo">
<br clear="both" />
<div id="draggable" class="draggable ui-widget-content" style="background: #a7fbdf;">
<p>AAA</p>
</div>
<div id="draggable2" class="draggable ui-widget-content" style="background: #a7fbdf;">
<p>BBB</p>
</div>
</div>
I want to remove a dragged element, but it should only be removed when it doesn't have the class "nodrop".
here's my current code it removes all elements wheter i included an if function:
$(".löschen").droppable({
drop: function(event, ui) {
if (!$(this).hasClass("nodrop")){
ui.draggable.remove();
findTotal();
}
}});
I don't have any plan what I've done wrong...
You get the current drop container (.löschen) with $(this). With $(ui.draggable) you get the dropped element with class nodrop.
$(".draggable").draggable();
$(".löschen").droppable({
drop: function(event, ui) {
var $dropContainer = $(this);
var $dragContainer = $(ui.draggable)
console.log($dropContainer, $dragContainer);
if (!$dragContainer.hasClass("nodrop")){
$dragContainer.remove();
}
}});
.draggable {
width: 100px;
height: 100px;
}
.drop {
background-color: green;
}
.nodrop {
background-color: red;
}
.löschen {
width: 200px;
height: 200px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable nodrop">NO DROP</div>
<div class="draggable drop">DROP</div>
<div class="löschen">TRASH</div>
$(".target").droppable({
connectWith: ".connected",
drop: function (event, ui) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if ($(this).hasClass("source connected")) {
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
i've tried ui.item and ui.draggable, but no success
PS: Newbie :)
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
connectWith: ".connected",
drop: function( event, ui ) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if (ui.draggable.hasClass("connected")) {
console.log("ok");
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
}
});
});
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content connected">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
I have been trying to add focus function to my specific input i.e want to show a div on focus with class as : .search_by_name but it's not working so if you people please take a look at my code that what I am doing wrong please?
Here is code as :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
background: #474747;
display: none;
width: 297px;
margin-left: 179px;
margin-top: 15px;
height: 15px;
position: absolute;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.arrow-up_search_by_business_name {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #474747;
position: relative;
top: -8px;
left: 20px;
}
.search_by_business_name_text {
background: #99cc33;
font-family: Arial;
font-style: italic;
color: #fff;
padding: 7px;
font-size: 14px;
text-align: left;
padding-left: 15px;
margin-top: -4px;
}
</style>
<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">
<div class="search_by_business_name">
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>
Please have a look at live version as : http://huntedhunter.com/waseem_jobs/pacific_site/index.html
As I explained in the comments, you should not use .next() as the element you are looking for is not the next sibling of the target element.
Also .focus() takes only one function as argument, you need to use .blur() to hide the element
$("#search_by_business_name_input").focus(function () {
$(".search_by_business_name").show();
}).blur(function () {
$(".search_by_business_name").hide();
});
The script should be inside the <body> tag.
In your page the script is after </body></html>
<script>
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
</script>
</body>
</html>
Edit:
Of course it does not work.
Have you read the documentation for $.next()?
.next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Replace this:
$( this ).next( ".search_by_business_name" ).css( "display", "block" );
With:
$( ".search_by_business_name" ).css( "display", "block" );
Edit2:
Wrap your code in $.ready:
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
You should put
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( ".search_by_business_name" ).show();
});
</script>
at the bottom of body element, because when excute this code,
$("#search_by_business_name_input" ) = []
or
you can write it like this
$(document).on("focus", "#search_by_business_name_input", function(){
$( ".search_by_business_name" ).show();
})
hey there i have little list here:
<ul id="selectable">
<li id='id.00'></li>
<li id='id.10'></li>
<li id='id.20'></li>
<li id='id.30'></li>
<li id='id.40'></li>
<li id='id.50'></li>
<li id='id.60'></li>
<li id='id.70'></li>
<li id='id.80'></li>
<li id='id.90'></li>
</ul
and i am able to select one or more of those listelement´s using css:
ul {overflow:hidden;}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: black; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 300px; }
#selectable li {float: left; width: 30px; height: 20px; background-color: none; display:block; }
and now i want to save the id´s of all selected element´s using jquery:
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $(this).attr('id');
result.append( index );
alert(index);
});
}
});
});
ok so far so good:
When i select e.g. four listelements, they get marked, BUT: only the last id is saved.
For example, when i select this listelement´s:
<li id='id.00'></li>
<li id='id.10'></li>
<li id='id.20'></li>
<li id='id.30'></li>
only the id: "id.30" is safed in my variable "index".
How can i get my jquery to safe all id´s of selected elements and not just the last one? greetings!
Try .map()
var result = $(".ui-selected", this).map(function () {
return this.id;
}).get();
Note: This will return array
If you want to get string use .join()
var result = $(".ui-selected", this).map(function () {
return this.id;
}).get().join(',');
Updated after OP's comment
fiddle Demo
$(function () {
$("#selectable").selectable({
stop: function () {
var result = $(".ui-selected", this).map(function () {
return this.id;
}).get().join(',');
$('#select-result').html(result);
}
});
});