I'm looking to use jQuery UI Sortable + Draggable + Droppable with the same items. I'd like to sort all .item elements and be able to drag and drop an .item into another. Below is my code:
<script>
$(function() {
$("#wrapper").sortable({
items: ".item",
stop: function(event, ui) {
// save new sort order
}
});
$(".item").draggable({
helper: ".clone",
connectToSortable: "#wrapper"
}).disableSelection().droppable({
accept: ".slide",
drop: function(event, ui) {
// dropping .item into another .item
}
});
});
</script>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
When I use sortable + draggable + droppable, only one or the other works not all of them together. What am I missing to achieve this?
Thanks!
I'm not sure I entire understand what you are trying to say. If you are just trying to sort the items in your list with drag and drop, you don't need the .draggable and .droppable.
http://jsfiddle.net/Earendil/saQwr/
If you are trying to drop one item element into another, let me know and I'll see if I can get that working and post an updated fiddle for it.
Related
I am using leaflet markers in my ASP.NET MVC 5 application.
I need to drag marker outside application to a div element, where I want to get its id to perform further operations.
marker=new L.marker([latNumber,longNumber], {draggable:'true'});
marker.id = "ABC";
$('#'+ marker.id).draggable(); // draggable jquery UI
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
marker.setLatLng(position,{draggable:'true'}).bindPopup(position).update();
});
On the other hand I am using droppable element of jquery UI
$("#navs").droppable({
drop: function (event, ui) {
alert('dropped')
}
});
I do not get dropped event on navs element when I drop it over it. What changes I need to do to make it work.
If someone can further explain this, it would be of great help too.
Actually, there seems to be a workaround. Leaflet markers calls an event "add" after the marker is added to the map, and becomes visible. In that event you can initialize a draggable on the icon corresponding to that marker.
m=L.marker([lat,lng],{
title:title,
draggable:true
});
m.on("add",function(){
$(this._icon).data("marker",this);
$(this._icon).draggable({
appendTo:"body",
helper:"clone",
zIndex:1000
});
});
"appendTo" is required for dragging outside of leaflet panel. zIndex should be higher than leaflet map zIndex (not sure if it's fixed, it's 600 on my page). Probably, you will need a helper function for copying an icon, I've customized my helper (marker is accessible via data "marker").
I've used that with leaflet 1.0.3.
You can't drag a Leaflet marker outside the map.
The draggable option of a marker and the draggable concept of jQuery are completely different.
That beeing said, you can pretend a marker is dragged by using the image of the marker an place it above the map: it is not part of the map, but it looks like (that is what the link you mention is referring to)
<div>
<div id='map'></div>
<img style="position: absolute; left: 300px; top: 200px; z-index: 1000" id="fakeMarker" src="https://unpkg.com/leaflet#1.0.1/dist/images/marker-icon.png"></img>
</div>
<ul id="liste">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<div id="log"></div>
<script>
$( function() {
$("#fakeMarker").draggable();
$( "#liste li" ).droppable({
accept: "#fakeMarker",
drop: function( event, ui ) {
$( "#log" ).html("dropped on " + $(this).html());
}
});
} );
</script>
Here is an example: https://yafred.github.io/leaflet-tests/20161120-drag-and-drop-outside-map/
I want gp_item should be sortable and when drag and drop under gp_delete area gp_item should get deleted.
When I did, it either working sorting or deleting. Both not working together.
<div id='container_gp'>
<div id='1' class='gp_item'> Graph 1</div>
<div id='2' class='gp_item'> Graph 2</div>
<div id='3' class='gp_item'> Graph 3</div>
</div>
<div id='gp_delete'>Drop to delete here </div>
I have written like that.
$('.gp_item').draggable({
revert: true,
proxy:'clone'
});
$("#gp_delete").droppable({
activeClass: "active",
drop: function(event, ui) {
if(confirm("Are you sure you wish to delete"))
{
//delete code
ui.draggable.remove();
}
}
});
I modified a bit your code and now works, the trick is to set the draggable and sortable features on the container not on single elements:
$('#container_gp').sortable({revert: 100}).draggable({
revert: 'invalid',
proxy: 'clone'
}).disableSelection()
$("#gp_delete").droppable({
activeClass: "active",
hoverClass: "ui-state-highlight",
accept: '#container_gp div',
drop: function (event, ui) {
if (confirm("Are you sure you wish to delete")) {
ui.draggable.remove();
}
}
});
Working fiddle: http://jsfiddle.net/ckWKE/2/
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 would like to trigger an event when I am leaving the droppable element, so I plan to use the out function. But I have two droppable elements. When I wrote the code for one element it works but not for two.
Html :
<div id="source">
<item1>
...
<itemx>
</div>
<div id="drop1"></div>
<div id="drop2"></div>
Jquery:
$("div#drop1, div#drop2").droppable ({
drop : function (event, ui) {
$(this).append (ui.draggable);
alert("Hello!");
},
out : function (event, ui) {
alert("Goodbye");
},
});
But the Out function doesn't trigger ? I could write it twice but if I have 20 droppable elements, it's not the solution.
Any ideas ?
Thanks !
you have an error on line 9 ... but its working for me without this... check this fiddle:
http://jsfiddle.net/yCeL3/
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'
});
});