So I currently am attempting to make my first website (so forgive me for the very sloppy code!) and am having a bit of trouble getting the draggable function to work how I want it to.
This is the first part where I create the divs and set all of the information to how I want it to be. Basically it's using an api to get item information from a game and then is making a display for that item.
<div class='item' id='item"+itemid+"' title='Item'>\n<div class='item_image'><img src='http://ddragon.leagueoflegends.com/cdn/5.2.1/img/item/"+item.image.full+"' style='z-index: 1;position: absolute;'><img src='images/item_border.png' style='z-index: 2;position: absolute;'></div>\n<div class='item_name'>"+item.name+"</div><br>\n<div class='item_cost'><img src='images/gold.png'> "+item.gold.total+"</div></div><br>\n
I then tried to make the whole "itemid" div draggable, but when it's dragged I only want the item image to be shown under your cursor, not the whole div. If I understand this correctly, that's what the "appendTo" is used for:
$("#item"+itemid).draggable({
containment: "window",
appendTo: "#item"+itemid+" .item_image",
helper: "clone",
distance: 25,
opacity: .8,
scroll: false,
stack: "div",
revert: true
});
However whenever I try to drag something using this, it shows not just the item image+the border, but also the item name and item cost, although the gold image is at a bigger scale than it normally is when not being dragged.
How would I make it work so it only shows the image, and not the whole thing when being dragged? Also, why is it showing the whole div if the one I selected for the appendTo is only the image?
Thanks in advance!
The question: "How appendTo works in Draggable()?"
I will try to answer that.
the short answer is "Which element the draggable helper should be appended to while dragging." If you have problem understanding this sentence (like I had) let me explain it:
To explain appendTo I have to explain helper first, because they are kind of related to each other. when you start dragging an element using helper, you have three options:
1- helper: 'original' //default
2- helper: 'clone'
3- helper: function(){ return "an element" }
1 - The first option is "default" and it means the dragging element is the element itself and it has it's own position in the DOM TREE and appendTo option doesn't work in this situation. The element doesn't append to anything, it is in the same situation as before in the DOM TREE.
2 - The second option is "clone" and it means the dragging element is not the same element you start to drag, it's another element copied from the first one. Now, since we can't have an orphan element, who is the parent of the new copied element? well you should answer this in the appendTo option.
3 - The third option is "an element" returning from a function. It is something like:
helper: function(){ return $("<p>YES</p>"); }
And again this new "p" can't be an orphan element so again we attach it to an element which is selected in appendTo option.
At the end you should know that the appendTo is just doing his job while you are dragging the element and after dropping the helper will gone (unless you attach it to an element) and the appendTo will finish his job.
Related
This is quite a complicated question so I am not looking for "full examples", but instead ideas of implementing a solution to my problem.
I am creating a drag-and-drop page where users can drag and drop tools into their workspace. This is currently working fine through the implementation of draggable() (jQuery UI).
However, the system is getting complicated with new features I am implementing:
When dragged onto the workspace, the user can freely move the items around their page. However I would like the user to be able to drag items on top of other divs- and this dropped item should "morph" into this div (hopefully by using append()). This specific div that the element is dropped onto implements sortable(), so where ever the dropped element is placed should be its specific position on this sortable list.
EXAMPLE: If the div contains a number of dropped elements; lets say 5 items, if another item is dropped in between the 2nd and 3rd items, it should be appended to this div in that position.
Secondly, any element that is appended to a sortable div should then have the ability of being dragged out of this sortable div (un-appended) and back onto the main area of the workspace (I have no clue of how to do this!) BUT it should still holds its ability of being sorted (list should still be sortable).
I am using jQuery + jQuery UI to complete this project and may use other javascript-based extensions if they can complete my desired outcome easily.
Type of implementation I have at the moment
This implementation is very unfinished.
$("div.layout.lo-content > div.content").droppable(
{
drop: function(e, ui)
{
$(ui.draggable).appendTo($(this));
if($(this).hasClass("ui-sortable"))
{
$("div.content").sortable('refresh');
}
}
});
^^ when doing sortable('refresh') it breaks the system with error:
Uncaught Error: cannot call methods on sortable prior to
initialization; attempted to call method 'refresh'
The sortable list which the item is dragged onto:
$("div.layout.lo-content > div.content").sortable(
{
opacity:0.7,
axis:'y',
start: function(e, ui)
{
$(this).children("div.ui-sortable-placeholder").css("height",$(ui.helper).css("height"));
}
});
You could try using AngularJS with ng-sortable.
It looks like it can do exactly what you have described.
From readme
as-sortable can be added to the root element.
as-sortable-item can be added in item element, and follows
ng-repeat.
Here is a DEMO
Instead of ui.draggable you can use only https://jqueryui.com/sortable/ with the configuration parameter for connected lists.
It allows you to drag drop between different lists and also sort items per list.
API: http://api.jqueryui.com/sortable/
Since
$(document).ready(function(){
$('.notice').tooltip();
});
doesn't work for me - probably because I am loading the element with the class .notice dynamically with Ajax - I have tried to go ahead with another way. So this is what I have so far:
$(document.body).on("mouseover", ".notice", function() {
$(this).tooltip();
});
This makes it work but it causes two problems:
The first time when I hover the element, nothing happens (even no error in the console) but the second time when I hover it, tooltip works!
At the second time when I hover the element, I see the tooltip box and the title box. See image bellow.
I appreciate any help!
You need to init tooltip when you're creating new ".notice" element.
e.g.
$(document.body).tooltip();
For delegated tooltip functionality you can simply attach handler to parent container, then all inner elements with title attributes will get custom tooltips:
$(document.body).tooltip();
Demo: http://jsfiddle.net/off074wb/
How do you append an item being dragged to a target element on drop, using jQueryUI's draggables/dropables? It looks like the way jQuery UI works right now is it just moves the items around on the screen via absolute positioning. Unfortunately, this functionality makes form submissions useless, as you cannot get the positions of the values on submission.
Thanks in advance for any items/pointers!
If I understood correctly, you want the dragged element to be detached from it's current parent and be appended to the new one, right? You can use a helper to do the dragging (so the original element is not affected) and, upon drop, detach it and append it to the target (thanks #Oleg and #Brian for improving over my original answer).
$(myDraggable).draggable({
helper:"clone",
containment:"document"
});
$(myDroppable).droppable({
drop:function(event, ui) {
ui.draggable.detach().appendTo($(this));
}
});
Working example at jsFiddle
When a draggable attribute is enabled on a parent element(<li>) I cant make contenteditable work on its child element (<a>).
The focus goes on to child element (<a>),but I cant edit it at all.
Please check this sample
http://jsfiddle.net/pavank/4rdpV/11/
EDIT: I can edit content when I disable draggable on <li>
I came across the same problem today, and found a solution [using jQuery]
$('body').delegate('[contenteditable=true]','focus',function(){
$(this).parents('[draggable=true]')
.attr('data-draggableDisabled',1)
.removeAttr('draggable');
$(this).blur(function(){
$(this).parents('[data-draggableDisabled="1"]')
.attr('draggable','true')
.removeAttr('data-draggableDisabled');
});
});
$('body') can be replaced by anything more specific.
If new contenteditable elements are not added in the runtime, one can use bind instead of delegate.
It makes sense that the draggable and contenteditable properties would collide. contenteditable elements, like any text field, will focus on mousedown (not click). draggable elements operate based on mousemove, but so does selecting text in a contenteditable element, so how would the browser determine whether you are trying to drag the element or select text? Since the properties can't coexist on the same element, it appears that you need a javascript solution.
Try adding these two attributes to your anchor tag:
onfocus="this.parentNode.draggable = false;"
onblur="this.parentNode.draggable = true;"
That works for me if I add it to the <a> tags in your jsFiddle. You could also use jQuery if it's more complicated than getting the parentNode.
Note: This is a workaround since I believe the inability for these two functionalities to work together resides in the HTML spec itself (i.e. the not working together thing is intentional since the browser can't determine whether you want to focus or drag on the mousedown event)
I noticed you explicitly set 'no libraries', so I will provide a raw javascript/HTML5 answer
http://jsfiddle.net/4rdpV/26/
This was my crack at it.
First of all, it might be better to include the data in one single localStorage item, rather than scatter it.
storage={
'1.text':'test 1',
'2.text':'test 2'
}
if(localStorage['test']){
storage=JSON.parse(localStorage['test'])
}
this creates that ability, using JSON to convert between object and string. Objects can indeed be nested
I also added (edit) links next to the items, when clicked, these links will transform the items into input elements, so you can edit the text. After hitting enter, it transforms it back and saves the data. At the same time, the list items remain draggable.
After saving, hit F12 in chrome, find the console, and look in the localStorage object, you will see all the data was saved in localStorage['test'] as an Object using JSON.stringify()
I tried my best to design this to be scaleable, and I think I succeeded well enough; you just need to replace the HTML with a container and use a javascript for loop to write out several items, using the iterator of your choice to fill the parameter for edit(). For example:
Say you changed storage to hold "paradigms" of lists, and you have one called "shopping list". And say the storage object looks something like this:
{
"shopping list":{
1:"Milk",
2:"Eggs",
3:"Bread"
}
}
This could render that list out:
for(i in storage['shopping list']){
_item = storage['shopping list'][i];
container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a> (edit)</li>'
}
Of course, if you were to edit the structure of the storage object, you would need to edit the functions as well.
The output would look something like this:
Milk (edit)
Eggs (edit)
Bread (edit)
Don't worry about the input elements if that worries you; CSS can easily fix it to look like it didn't just change.
If you don't want the (edit) links to be visible, for example, you can do this in CSS:
a[href="#"]{
display:none;
}
li[draggable="true"]:hover a[href="#"]{
display:inline;
}
Now the edit links will only appear when you hover the mouse over the list item, like this version:
http://jsfiddle.net/4rdpV/27/
I hope this answer helped.
Using html5sortable and newer JQuery events (delegate is deprecated, answer 3 years after initial question), bug still affects Chrome 37. Contenteditable spans and html5sortable seem to play nice in other browsers. I know this is only partially relevant, just keeping documentation on changes I've noticed.
$(document).on('focus', 'li span[contenteditable]', function() {
$(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL
});
$(document).on('blur', 'li span[contenteditable]', function() {
$(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL
});
I am searching through "drag & drop sortable" Javascript libraries such as Prototype's sortable, JQuery's sortable, and a number of standalone ones.
I feature that I can't find (but know it's out there) is, I can't think of a better word, "delayed" sorting so that when I move an item around on the list, it will not be moved immediately, but a line or other kind of marker will appear showing where the item would end up if I dropped it right now. This functionality can for example be found in Windows when moving items around in the start menu.
Could anybody point me towards a Javascript solution that can do this? Prototype or standalone would be preferred for the current project, but JQuery is fine as well.
Take a look at script.aculo.us Sortables and property called ghosting.
Refer:
https://github.com/madrobby/scriptaculous
http://madrobby.github.io/scriptaculous/sortable-create/
I use jQuery to do this in one of my projects.
On the list element, lets say an element , I assign the class sortable:
<ul class="sortable">
Then I've a Javascript function like this:
$(function() {
$( ".sortable" ).sortable({
placeholder: "placeholder-sortable",
update: function(event, ui) {
var listElements = $(this).sortable('toArray');
//Your code
}
});
$( ".sortable" ).disableSelection();
With this the new order is saved into the variable listElements, in which there are stored the ids of the different li items.