I have a list:
<ul id="selector">
<li id="1">One</li>
<li id="2">Two</li>
</ul>
and then I have:
$("#selector li").draggable({
revert: "valid"
});
$("#xyz tr").droppable({
drop: function(event, ui) {
console.log(ui.draggable.text());
}
});
Q: How do I determine that it was id=1 or id=2 that was dropped?
The text property is giving me "One" or "Two", but I need "1" or "2".
Use this method:
ui.draggable.attr('id')
Related
So I have an unordered list of draggables that I want to drag into another unordered list of droppables. If I clone the draggable and append it to "body", then I can drag it out of its container and drop it on the droppable elements in the other list, but it does not automatically scroll through the droppable unordered list. If I clone and append to the other unordered list, then it will automatically scroll the droppable list, but the element is not visible when dragging until it is hovering over the droppable list. Does anyone know of a workaround or a better approach to this problem?
Fiddle with code here: https://jsfiddle.net/bkfxjnom/6/
Draggable code:
$('.draggable').draggable({
helper: 'clone',
appendTo: "body",
zIndex: 100,
refreshPositions: true,
revert: 'invalid',
start: function(event, ui) {
$(this).css('visibility', 'hidden');
},
stop: function(event, ui) {
$(this).css('visibility', 'visible');
}
});
Droppable list html:
<ul class="list-group" id="root" style="overflow-y:scroll; height: 150px">
<li class="list-group-item category-droppable" id="level1">
<span class="glyphicon glyphicon-chevron-right"></span>FirstLvL
<ul class="list-group" id="level1">
<li class="list-group-item category-droppable" id="level2">
<span class="glyphicon glyphicon-chevron-right"></span>SecondLvL
<ul class="list-group" id="level2">
<li class="list-group-item category-droppable" name="A" id="level3">A</li>+++ many li elements
</ul>
</li>
</ul>
</li>
</ul>
Thanks in advance!
So the workaround I ended up using for this was to append the clone to the container I wanted to be scrollable, as well as containing it there.
Then I made another clone that I offset on drag with the mouse, of which is positioned absolutely. Sort of a hacky solution, but it works.
$('.draggable').draggable({
scrollSensitivity: 35,
scrollSpeed: 28,
containment: "#root",
helper: "clone",
appendTo: "#root",
zIndex: 5000,
refreshPositions: true,
start: function (event, ui) {
parent = $(this);
$(this).css('visibility', 'hidden');
$(ui.helper).css('visibility', 'hidden');
clone = $(this).clone();
clone.addClass("ui-draggable-dragging");
clone.css('visibility', 'visible');
clone.css("position", "absolute");
clone.css("z-index", 5001);
clone.prependTo($(".dragging-area"));
$("#unprocessed_list").droppable("disable");
},
stop: function (event, ui) {
clone.animate($(this).offset(), 500);
setTimeout(function () { clone.remove(); parent.css('visibility', 'visible'); }, 500);
$("#unprocessed_list").droppable("enable");
},
drag: function (event, ui) {
clone.offset({ top: event.pageY - clone.height(), left: event.pageX - clone.width()/2 });
}
});
This is probably a simple question, but how can I replace the thing I am dragging with html from an ajax call?
So, if the draggable items are just 'text' items (as below in the html snippet), and when I drag the thing I use a 'image' via the helper method, how can I 'on drop' not use either of them but insert the html as returned from a ajax call.
Where do I make the call (btw, using the 'input-type' value to the ajax call to get the correct html)?
How to I prevent the default 'dragged item' from being inserted? I.e. I don't want the div put in or the helper method image....
Do I need to add like a droppable or do I do this in the sortable on like the received event (kind of works, can't remove image but from help method)??? (I have been trying both, and whilst the ajax call worked and I get the data etc, given that I don't know how to prevent the default stuff being dropped I am not sure 'what' I am replacing with the 'result' from the call...)
$("#desktoplayout").sortable({
receive: function (event, ui) {
$(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there.
}
}); // A sortable list of stuff into which things are dragged.
var input-type;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function (event, ui) {
input-type = $(this).find('.preview').data("input-type");
},
drag: function(e, t) {
},
stop: function(e, t) {
}
});
and
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
Update
This seems to do what I wanted... is calling remove on the helper the correct way of doing this?
receive: function(event, ui) {
ui.helper.remove();
var $this = $(this);
$.get("somewhere", function(data) {
// Note: presume more logic here.....
$($this).append(data);
});
}
Here is a working example of one solution:
https://jsfiddle.net/Twisty/zh9szubf/
HTML
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
<ul id="desktoplayout">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JQuery
$(function() {
$("#desktoplayout").sortable({
receive: function(event, ui) {
var newItem;
$.post("/echo/html/", {
html: "<li class='newItem'>From Ajax</li>"
}, function(data) {
ui.helper.replaceWith(data);
});
}
});
var inputType;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function(event, ui) {
inputType = ui.helper.find('.preview').data("input-type");
}
});
});
This will work with $.get() too, but for the example, it had to be $.post(). Basically, whatever you want top be the result, That code should be in the ui.helper.replaceWith() section.
I have 2 lists with items, I add UI sortable to it.
How can I select and do some fun with just moved element?
When I'm trying this code - it add a class to all elements from first UL, but I need to add this class to just moved element to second UL.
<ul class="moveMe" id="ul1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="moveMe" id="ul2">
<li></li>
</ul>
<script>
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
$('li', this).addClass('justMoved');
}
}).disableSelection();
</script>
Thanks!
Just use ui.item instead of this.
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
ui.item.addClass('justMoved');
}
}).disableSelection();
See this jsfiddle
And the corresponding doc entry.
ui
item
Type: jQuery
The jQuery object representing the current dragged element
I am trying to implement the click of the first item of the selectable list.I can add the CSS
but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..)
I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<ol>
Jquery function
$(function() {
$( "#selectable" ).bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
selected: function(event, ui) {
alert("selected");
},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
I can apply the css to the first list item like this
$('li:first-child').select().addClass("ui-selected");
But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.
After some trying i managed to get it working.Posting the solution as it may be useful.
I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind
$( "#selectable" ).bind( "selectableselected", function(event, ui) {
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
alert("test");
});
});
Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.
create: function(event, ui) {
setTimeout( function() {
$('li:firstchild').addClass("uiselected").trigger('selectableselected');
}, 100 );
the great thing about Jquery is that its so intutive.
I have a list like so:
<ol id="page_items">
<li>
<label for="page_body_1">Content Area 1</label>
<textarea name="page_body_1" class="page_content_area" rows="10"></textarea>
</li>
<li>
<label for="page_body_2">Content Area 2</label>
<textarea name="page_body_2" class="page_content_area" rows="10"></textarea>
</li>
</ol>
When the page loads, #page_items turns into a tinyMCE editor. What I want is for the element that defines whether or not the li elements are being sorted to be the <label> but no other child elements of li. So the only element that starts the sort is the label.
Here's my jQuery:
$(document).ready(function(){
$("#page_items").sortable({
activate: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
tinyMCE.execCommand("mceRemoveControl", false, EditorID);
$('#'+EditorID).hide();
}
},
stop: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
$('#'+EditorID).show();
tinyMCE.execCommand("mceAddControl", false, EditorID);
delete EditorID;
}
}
});
});
In case anyone is wondering, I'm disabling the tinyMCE because in FireFox, moving an iFrame around the DOM clears it's contents and doesn't allow focus back on it.
Is there a way to cancel the sortable if the element clicked isn't the label?
If anyone has any code clean-up suggestions they are also welcome!
Thanks.
This turned out to be a sortable option that I didn't see before (I looked... oh I looked). The handle option is what I need. This initializes a sortable with the handle option specified.
Simply...
$(document).ready(function(){
$("#page_items").sortable({
handle: 'label'
});
});