Develop Reference

Vue draggable with elements that change height upon being dragged

I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?

Move divs with mouseclick between div container

I would like to drag and drop divs within a container-div. Only up and down the list, using the mouse. How can I create this?
Searching the internet and stackoverflow didn't give me a good answer, since I would like to have it in vanilla Javascript and everything is nowadays in jQuery. :S
This is wat I have:
<div class="chapcontainer" data-chaporder="1000">
<div class="chapter">Big fire</div>
<div class="subchapter" data-chapid="1">Forest burning</div>
<div class="subchapter" data-chapid="2">Balu hoses</div>
<div class="subchapter" data-chapid="3">Forest animals die</div>
<div class="subchapter" data-chapid="4">Lovely fire</div>
</div>
</div>
The chapter-div is the container. Within this div I want to be able to move the subchapter-div with a click of the mousebutton up and down the list of subchapter-divs.
For example I move the subchapter-div with data-chapid 4 to the top, then it should be moved to the top and the data-chapid changed to 1. Is something like this possible in vanilla javascript?
I've read about AppendChild, but I don't know how I can trigger this with the mouse.

You could do it with jQuery:
$(".subchapter[data-chapid='1']").on("click", function() {
$(this).css('margin-left', '20px') // add margin/padding/etc here
})
Fiddle

Doing drag and drop yourself is complicated, but here are some of the basic steps. One advantage of rolling your own is you can do more advanced things than your standard jquery ui drag and drop can, like smooth scrolling the container, auto-opening nested tree items if the user hovers over them, or doing animations while moving items.
Steps:
Listen for mousedown events on your items in your container. When the user presses down on an item, store the mouse's offset relative to the top of container (this includes the scroll of the container). Also store the mouse's offset relative to the item being dragged.
Clone the element that's being dragged and absolute position it under the mouse, using the relative offset you stored in step 1.
Make the original element invisible.
Listen for mousemove events on your container. Reposition the dragged item appropriately.
As the mouse moves, you'll need to update the mouse's new offset from the top (including scroll) and figure out which item you're over. You can do this by getting the height of each item in your list. So if your mouse is 710 pixels from the top, and each item is 100 pixels high, you're over index 8. You can use this info to change the style of the item you're over to show that it's a drop target. One thing to watch out for is if you do any styling changes that change the heights of items, you'll need to recalculate your heights.
On mouseup, you already know which item you're over, so now you need to update your data array to move the dragged item, probably using array.splice. Delete the absolutely positioned dragged element, and rerender your list to reflect your changes. I'm assuming you're using some sort of templating library to render your stuff, or at least a render function that clears what's there and replaces it with the current state.

jquery draggable and droppable - stop inheriting parents css

This is hard to explain but I have draggable and droppable elements on my page. Some of the droppable elements have draggable elements inside them already but most don't.
When you hover over the droppables a back-ground image appears so you know your hovering over it. However, when you move a draggable into another droppable, now hovering over the newly moved draggable a background image appears in the OLD droppable which used to contain it.
if you look here you can see my problem: - try moving one of the yellow boxes around and then hover over it after you've moved it. The background image appears in the initial position.
http://liquidlizard.net/
Can anyone tell me how to sort this out? I'd appreciate it :)
EDIT here's some of the code I'm using
<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div>
<div id="row-2col1" class="empty"><div class="position"></div></div>
<div id="row-2col2" class="empty"><div class="position"></div></div>
JS:
$('.draggable').draggable({start: function() {var initialposition = ???}});
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'});
function handleDropEvent( event, ui ) {
}
CSS:
.empty:hover{background-image:url(../img/tilehover.png);}
Basically everything has a class 'empty' which shows the background image when the item is hovered over.

The problem is that your dragged element is a child of the div it came from, so when you assign the empty class to that element, because your dragged element is a child of that didv, your CSS rule, .empty:hover comes into play.
To avoid this problem, put a second div inside of each box, like this:
Add a new div inside of the div with the class empty.
So this line: (and all the ones like it)
<div id="row-2col3" class="empty"><div class="position"></div></div>
Changes to this: (I broke it down to make it easier to read.)
<div id="row-2col3" class="empty">
<div class = "elementContainer"> <!-- This is added..-->
<div class = "wordHolder"></div> <!-- ...............-->
</div> <!--................-->
<div class="position"></div>
</div>
Then add this to your CSS:
.elementContainer {
position:relative;
}
.wordHolder {
position:absolute;
width:65px;
height:65px;
}
And finally, replace your CSS rule .empty:hover with elementContainer:hover and it should work!
How and Why it works
To quote w3schools,
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
So using .elementContainer with the relative attribute set serves as our container for our absolutely positioned elements with the class wordHolder. And they do not get in the way because they are removed from the regular flow and all the other elements act as if it did not exist.
You can read more about positioning elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps!

isotope image onclick to reveal new content in top div Wordpress

I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks

Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)

Javascript drop down menu widget

I have a menu consisting of an <ul> in a Web CMS.
I want several menu items to have sub-items that are displayed in a dropdown list. These sub-items are <ul>s as well.
This is basically easy to do with a few lines of CSS and Javascript, but I am looking for a ready-made Javascript solution that helps me handle the following:
Deal with screen edge situations: If any part the dropdown menu would be outside the current viewport, place it so that it is completely within the viewport.
This is a bitch to code from scratch.
"Nice to have"s would be:
Centered positioning below the drop-down button
Adding a onclick event to the body so that clicking outside the drop down menu will close it; clean removal of the onclick event afterwards
But those I can do myself if necessary.
A nice, small, unobtrusive widget that magically converts my <ul> would be lovely.
If the solution is based on a framework, it has to be Prototype as that's what I'm using in the CMS.

You can get the offsets of the UL, and check whether those are in a certain distance of the viewport.
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
It's also possible to get the exact position of the dropdown button clicked, and then you should apply basic math in order to position the menu beneath it.