I have something like the attached code where some green divs can be dragged and dropped between list elements.
There are 2 issues that I don't seem to be able to solve:
1) The "ghost" dragged image in the larger "Take Me" div is almost invisible. The user has very little idea of what is been dragged. Can this be changed somehow ?
2) The drop target is the one under the mouse pointer. This is quite logical but it makes it difficult for the user to understand where the green is going to be dropped. If it was dragged by the bottom then the green makes a big jump down when the mouse button is released. Is there a way to make the top of the ghost image snap to the pointer ?
In the final application there will be many green divs and the user should be able to slot them together with no overlap so a clear idea of what is being dragged and precision dropping are important.
Would I be better off not using the drag events and implement dragdrop manually the old-fashioned way (most likely using some kind of library) ?
I need support only for the latest browsers and have tried only Chrome and FF on Windows so far.
function initDragDrop(){
initDragDrop.dragged = null;
// Dragged
$('div')
.on('dragstart',
function(event) {
initDragDrop.dragged = this;
initDragDrop.dragged.style.opacity = 0.5;
event.originalEvent.dataTransfer.setData('text/plain', 'dummy');
})
.on('dragend', function( event ) {
event.target.style.opacity = '';
});
// Drop targets
$('li')
.on('dragenter', function(event) {
event.preventDefault();
})
.on('drop dragdrop', function(event){
event.preventDefault();
event.stopPropagation();
event.target.classList.remove('dragover');
if ( initDragDrop.dragged ) {
initDragDrop.dragged.style.opacity = '';
$(this).append($(initDragDrop.dragged));
initDragDrop.dragged = null;
}
})
.on('dragover', function(event) {
event.target.classList.add('dragover');
event.preventDefault();
})
.on('dragleave', function(event) {
event.target.classList.remove('dragover');
});
}
initDragDrop();
ul {
width: 30em;
display: block;
}
ul.small {
margin-top: 4em;
width: 10em;
}
li {
height: 2em;
border: 1px solid grey;
}
li.dragover {
background: #ddd;
}
div {
background-color: lightgreen;
border: 2px solid darkgreen;
position: relative;
margin: 0;
width: 90%;
height: 5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li></li>
<li></li>
<li><div draggable="true">
Take Me
</div></li>
<li></li>
</ul>
<ul class="small">
<li></li>
<li></li>
<li><div draggable="true">
Take Me too
</div></li>
<li></li>
<li></li>
<li></li>
</ul>
You can't style the dragged element directly.
As soon as the drag is started, it is a bitmap copy of what the element looked like at this moment.
But, you can change its style (or classes) before the drag starts, and revert it back right after.
So, we should be able to stylize it to be at the good position before the "screenshot" occurs.
Here is an attempt where the styling works but not the positionning… I'm trying to figure it out:
(function initDragDrop() {
initDragDrop.dragged = null;
// Dragged
$('div')
.on('dragstart', function(event) {
initDragDrop.dragged = this;
initDragDrop.dragged.classList.add('ghost');
event.originalEvent.dataTransfer.setData('text/plain', 'dummy');
// Set style for the element before dragging it
var elm = event.target;
elm.classList.add('dragged');
elm.style.top = (event.clientY) - 5 + 'px';
elm.style.left = (event.clientX) - 5 + 'px';
// Reset style after drag has started
setTimeout((function(elm) {
return function() {
elm.classList.remove('dragged');
elm.style.removeProperty('top');
elm.style.removeProperty('left');
}
})(elm), 1000);
})
.on('dragend', function(event) {
// event.target.style.opacity = ''; // Not used
});
// Drop targets
$('li')
.on('dragenter', function(event) {
event.preventDefault();
})
.on('drop dragdrop', function(event) {
event.preventDefault();
event.stopPropagation();
event.target.classList.remove('dragover');
if (initDragDrop.dragged) {
initDragDrop.dragged.classList.remove('ghost');
$(this).append($(initDragDrop.dragged));
initDragDrop.dragged = null;
}
})
.on('dragover', function(event) {
event.target.classList.add('dragover');
event.preventDefault();
})
.on('dragleave', function(event) {
event.target.classList.remove('dragover');
});
})();
ul {
width: 30em;
display: block;
}
ul.small {
margin-top: 4em;
width: 10em;
}
li {
height: 2em;
border: 1px solid grey;
}
li.dragover {
background: #ddd;
}
div {
background-color: lightgreen;
border: 2px solid darkgreen;
position: relative;
margin: 0;
width: 90%;
height: 5em;
}
.ghost {
opacity: 0.5;
}
.dragged {
display: block;
position: fixed;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li></li>
<li></li>
<li>
<div draggable="true">
Take Me
</div>
</li>
<li></li>
</ul>
<ul class="small">
<li></li>
<li></li>
<li>
<div draggable="true">
Take Me too
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
Related
I need to create popup language dropdown menu with country name, flag and link to the language version of the site. After user select menu item - it should take you to the needed url (language version of the page) and this choice should stay visible on the new page (after reload). Example of the menu - https://prnt.sc/sjumj8 (https://www.farfetch.com/shopping/women/items.aspx)
Here is an example of what I'm trying to create: https://jsfiddle.net/Okean/8x0atLpy/62/
<body>
<ul class="list-unstyled" id="select-lang">
<li class="init">[SELECT]</li>
<li data-value="value 1"> <img src="https://image.flaticon.com/icons/svg/197/197615.svg"> Language 1 </li>
<li data-value="value 2"> <img src="https://image.flaticon.com/icons/svg/197/197386.svg">Language 2 </li>
<li data-value="value 3"> <img src="https://image.flaticon.com/icons/svg/197/197484.svg">Language 3 </li>
<li data-value="value 4"> <img src="https://image.flaticon.com/icons/svg/197/197380.svg">Language 4 </li>
</ul>
</body>
<script>
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
});
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#select-lang').val(selItem);
}
$('#select-lang').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
</script>
<style>
body{
padding:30px;
}
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
li img {
width: 20px;
}
</style>
<ul> tag element won't ever trigger a .change event,
you can't even use li.val() as it doesn't have an actual value attribue.
So you need to workaround a little, something like this
$(document).ready(() => {
// cache selectors for better performance
const listItem = $("ul");
const listSelected = listItem.find('.init');
const allOptions = listItem.children('li:not(.init)');
listItem.on('click', '.init', () => {
listItem.children('li:not(.init)').toggle();
});
listItem.on('click', 'li:not(.init)', (e) => {
const that = $(e.target);
const setHTML = that.html();
allOptions.removeClass('selected');
that.addClass('selected');
listSelected.html(setHTML);
allOptions.toggle();
sessionStorage.setItem('SelItem', setHTML);
});
const selectItem = $("#select-lang");
const storedItem = sessionStorage.getItem('SelItem');
if (storedItem) {
listSelected.html(storedItem);
}
});
this should work as expected, storing target <li> HTML inside SelItem on sessionStorage
I have an HTML page which has some draggable elements. Our specs say that hovering mouse on such element the cursor must be grab , and during drag cursor must be grabbing .
I know it is possible to set dropEffect which changes cursor appearance above drop zone, but there are very little options: copy, move, link, and none -- no custom or alike.
I have tried to change cursor with Javascript and CSS, like setting cursor: grabbing; when ondragstart is fired. But browser default move cursor appears instead when dragging on drop zone.
So the question is: What am I missing to show grabbing cursor () during drag?
Unfortunately I cannot use JQuery or other helping libraries in the solution. Thanks in advance!
var onDragStart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
event.currentTarget.classList.add("being-dragged");
};
var onDragEnd = function(event) {
event.currentTarget.classList.remove("being-dragged");
};
var onDragOver = function(event) {
event.preventDefault();
};
.dropzone {
width: 500px;
height: 200px;
background-color: silver;
}
.block {
position: absolute;
background-color: pink;
margin: 10px;
border: 20px solid pink;
}
.draggable {
cursor: -webkit-grab;
cursor: grab;
}
.being-dragged {
cursor: -webkit-grabbing;
cursor: grabbing;
background-color: red;
}
<div class = "dropzone"
ondragover = "onDragOver(event);"
>
Grab and drag block around
<div class = "draggable block"
draggable = "true"
ondragstart = "onDragStart(event);"
ondragend = "onDragEnd(event);"
>
I'm draggable
</div>
</div>
It seems that browsers don't allow changing the cursor at the beginning of a drag & drop operation. I don't know why but it's a known issue, I believe they will in the future.
If jQuery is not an option, a possible way around is to implement a drag & drop from scratch, using mouse events and cloning the source element:
var onDragStart = function (event) {
event.preventDefault();
var clone = event.target.cloneNode(true);
clone.classList.add("dragging");
event.target.parentNode.appendChild(clone);
var style = getComputedStyle(clone);
clone.drag = {
x: (event.pageX||(event.clientX+document.body.scrollLeft)) - clone.offsetLeft + parseInt(style.marginLeft),
y: (event.pageY||(event.clientY+document.body.scrollTop)) - clone.offsetTop + parseInt(style.marginTop),
source: event.target
};
};
var onDragMove = function (event) {
if (!event.target.drag) {return;}
event.target.style.left = ((event.pageX||(event.clientX+document.body.scrollLeft)) - event.target.drag.x) + "px";
event.target.style.top = ((event.pageY||(event.clientY+document.body.scrollTop)) - event.target.drag.y) + "px";
};
var onDragEnd = function (event) {
if (!event.target.drag) {return;}
// Define persist true to let the source persist and drop the target, otherwise persist the target.
var persist = true;
if (persist || event.out) {
event.target.parentNode.removeChild(event.target);
} else {
event.target.parentNode.removeChild(event.target.drag.source);
}
event.target.classList.remove("dragging");
event.target.drag = null;
};
var onDragOver = function (event) {
event.preventDefault();
};
.dropzone {
width: 500px;
height: 200px;
background-color: silver;
}
.block {
position: absolute;
background-color: pink;
margin: 10px;
border: 20px solid pink;
}
.draggable {
position: absolute;
cursor: pointer; /* IE */
cursor: -webkit-grab;
cursor: grab;
}
.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
background-color: red;
}
<div class="dropzone" onmouseover="onDragOver(event);">
Grab and drag block around
<div class = "draggable block"
onmousedown = "onDragStart(event);"
onmousemove = "onDragMove(event);"
onmouseup = "onDragEnd(event);"
onmouseout = "event.out = true; onDragEnd(event);"
>
I'm draggable
</div>
</div>
It is a known issue reported here
While dragging, the cursor will automatically changed to normal.
My tries gave me the following. Gave an active on the element with grabbing cursor. While it is active, the cursor will change but once you start the drag, it will change automatically.
I tried to set body cursor to grabbing on dragstart but no result. Even it is not working.
var onDragStart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
event.currentTarget.classList.add("being-dragged");
};
var onDragEnd = function(event) {
event.currentTarget.classList.remove("being-dragged");
};
var onDragOver = function(event) {
event.preventDefault();
};
.dropzone {
width: 500px;
height: 200px;
background-color: silver;
}
.block {
position: absolute;
background-color: pink;
margin: 10px;
border: 20px solid pink;
}
.draggable {
cursor: -webkit-grab;
cursor: grab;
}
.draggable:active{
cursor : -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.being-dragged{
background-color: red;
cursor : -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
<div class = "dropzone"
ondragover = "onDragOver(event);"
>
Grab and drag block around
<div class = "draggable block"
draggable = "true"
ondragstart = "onDragStart(event);"
ondragend = "onDragEnd(event);"
>
I'm draggable
</div>
</div>
I went through a lot of pain trying to figure this out. The accepted answer was the best answer on the web, but best practices now would be to use the element's .setPointerCapture event, which allows you to listen to and act upon drag like behaviors on an element without being boxed into the narrow behavior of the Drag API. One way to do it would be like so:
el.onpointerdown = ev => {
el.onpointermove = pointerMove
el.setPointerCapture(ev.pointerId)
}
pointerMove = ev => {
console.log('Dragged!')
}
el.onpointerup = ev => {
el.onpointermove = null
el.releasePointerCapture(ev.pointerId)
}
The obvious gift being the fact that there is no cursor hijacking to be found sneaking in the backdoor here.
I know just a little bit about draggable elements with pure JavaScript and I'm sorry that I can't explain the following.
The problem was that the onDragEnd never get fired so I've searched something and find this example with draggable elements.
Now, if you change the function of the onDragStart event it will work but I think you have to change the cursor in another way like to change the class of the body onDragStart
var onDragStart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
event.currentTarget.classList.add("being-dragged");
};
All in one
var onDragStart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
event.currentTarget.classList.add("being-dragged");
};
var onDragEnd = function(event) {
event.currentTarget.classList.remove("being-dragged");
};
var onDragOver = function(event) {
event.preventDefault();
};
.dropzone {
width: 500px;
height: 500px;
background-color: silver;
}
.block {
width: 200px;
height: 50px;
background-color: pink;
}
.draggable1 {
cursor: -webkit-grab;
cursor: grab;
}
.being-dragged {
cursor: -webkit-grabbing;
cursor: grabbing;
background-color: red;
}
<div class="dropzone" ondragover="onDragOver(event);">
<div class="draggable1 block" draggable="true" ondragstart="onDragStart(event);" ondragend="onDragEnd(event);">
I'm draggable
</div>
</div>
Try this ! It works for me !
.draggable {
cursor: -webkit-grab;
cursor: grab;
}
.draggable:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
I spent sometime to find solution for this, ended with this trick. I feel this is best way less code and apt work.
.drag{
cursor: url('../images/grab.png'), auto;
}
.drag:active {
cursor: url('../images/grabbing.png'), auto;
}
I am looking for a way to allow a user to cancel a mouse drag operation by pressing the ESC key.
Can this be done using Javascript?
Thank you
Update
When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable. Once the element is dragged to a non-droppable area, I invoke a "mouseup" event on the dragged element, which causes the dragged element to be dropped onto a non-droppable area.
How can I do this using jQuery Draggable and jQuery Droppable?
When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable
I´ve created a demo of a possible solution that you can check in plunker.
As stated by #ioneyed, you can select the dragged element directly using the selector .ui-draggable-dragging, which should be more efficient if you have lots of draggable elements.
The code used is the following, however, apparently it's not working in the snippet section. Use the fullscreen feature on the plunker or reproduce it locally.
var CANCELLED_CLASS = 'cancelled';
$(function() {
$(".draggable").draggable({
revert: function() {
// if element has the flag, remove the flag and revert the drop
if (this.hasClass(CANCELLED_CLASS)) {
this.removeClass(CANCELLED_CLASS);
return true;
}
return false;
}
});
$("#droppable").droppable();
});
function cancelDrag(e) {
if (e.keyCode != 27) return; // ESC = 27
$('.draggable') // get all draggable elements
.filter('.ui-draggable-dragging') // filter to remove the ones not being dragged
.addClass(CANCELLED_CLASS) // flag the element for a revert
.trigger('mouseup'); // trigger the mouseup to emulate the drop & force the revert
}
$(document).on('keyup', cancelDrag);
.draggable {
padding: 10px;
margin: 10px;
display: inline-block;
}
#droppable {
padding: 25px;
margin: 10px;
display: inline-block;
}
<div id="droppable" class="ui-widget-header">
<p>droppable</p>
</div>
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
I tried to help but without the expected result...
Searching on google you can find that while dragging other events are locked, similar behaviour to what happens during a window.alert...
By the way, I am on a Mac and I can capture all keyboard events but not "controls key such as command, ctrl, esc, ecc."
Hope help you as a starter point!
function DragAndDropCtrl($) {
var self = this;
self.ESC = 27;
self.draggables = $('.draggable');
self.dropArea = $('#droppable');
self.currentDraggingElement = null;
self.currentDismissed = false;
self.dismissDragging = function(event, eventManager) {
self.currentDismissed = true;
//Using the manager you can't use the revert function OMG!
//return eventManager.cancel();
};
self.dropArea.droppable();
self.draggables.draggable({
revert: function() {
var revert = self.currentDismissed;
self.currentDismissed = false;
console.log(revert, self.currentDismissed)
return revert;
},
start: function() {
self.currentDraggingElement = $(this);
},
end: function() {
self.currentDraggingElement = null;
}
});
$(document).keypress(function(event) {
console.log('key pressed', event)
//How to intercept the esc keypress?
self.dismissDragging(event, $.ui.ddmanager.current);
if(event.which === self.ESC || event.keyCode === self.ESC) {
self.dismissDragging(event, $.ui.ddmanager.current);
}
});
}
jQuery(document).ready(DragAndDropCtrl);
#droppable {
border: 1px solid #ddd;
background: lightseagreen;
text-align: center;
line-height: 200px;
margin: 1em .3em;
}
.draggable {
border: 1px solid #ddd;
display: inline-block;
width: 100%;
margin: .5em 0;
padding: 1em 2em;
cursor: move;
}
.sidebar { width: 30%; float: left; }
.main { width: 70%; float: right; }
* { box-sizing: border-box; }
<div class="sidebar">
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
<div class="ui-widget-content draggable">
<p>draggable</p>
</div>
</div>
<div class="main">
<div id="droppable" class="ui-widget-header">
<p>droppable</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
Here's hoping someone know how to do this. I am new to programming and haven't been able to figure it out or find the answer anywhere else. What i am trying to do is add a secondary control to an existing tabbed slideshow. The secondary control will be linked bullets that become active and inactive just like the existing links do as the slideshow plays and on click.
You can see an example of what I have here http://jsfiddle.net/j08691/ZSPX3/1/. The jquery code follows. Thanks in advance for any help.
var HM = {
//tab
jqs_slideList: '.slideList',
jqs_tabList: '.slides .carouselLinks',
init: function() {
//init sliders
var aSliders = $(this.jqs_slideList);
if (aSliders.length > 0) {
this.slideShow(aSliders);
}
//init the carousels that are lists of links
$('.carousel.icons').hellmannsCrsl({
rotateSpeed: 5000,
viewport: '.carouselLinks'
});
},
slideShow: function(eSlideListParam) {
var slideList = eSlideListParam,
slides = slideList.find('li'),
tabList = slideList.siblings('.carouselLinks'),
tabs = tabList.find('li'),
speed = 500;
tabs.on('click', 'a', function(e) {
$(this).trigger('slides.swap');
e.preventDefault();
});
//make it automatic, but this doesn't work properly, I'm stuck...
setInterval(function() {
var current = parseInt($('li.selected a').data('links-to').split('_')[1],10);
var idx=current-1;
var max = $('.carouselLinks li a').length;
idx = (current<max) ? (idx+1):0;
$('a:eq('+idx+')').trigger('click');
}, 3000);
/**
* This is where the animation, i.e. fade, is performing.
* I find it quite convenient to use bind/trigger principle as it's easier to maintain
*/
tabs.find('a').bind('slides.swap', function() {
var self = $(this),
selfIndex = self.parent().index(),
targetSlide = slides.eq(selfIndex);
//fade in/out slides
slides.filter('.active').stop(true, false).fadeOut(speed, function() {
$(this).removeClass('active');
});
targetSlide.stop(true, false).fadeIn(speed).addClass('active');
tabs.removeClass('selected');
self.parent().addClass('selected');
});
}
};
HM.init();
Here's a Fiddle
HTML
<!-- bullet ctrl -->
<div class="bulletLinks">
<ul>
<li><a data-links-to="slide_1" href="#">1</a></li>
<li class="selected"><a data-links-to="slide_2" href="#">2</a></li>
<li><a data-links-to="slide_3" href="#">3</a></li>
<li><a data-links-to="slide_4" href="#">4</a></li>
</ul>
</div>
<!-- /bullet ctrl -->
CSS
.bulletLinks a {
background: #900; // Or bullet background image
display: block;
float: left;
width: 20px;
height: 20px;
margin-right: 7px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 50%;
transition: all 0.2s linear;
}
.bulletLinks a:hover {
background: #999;
color: #fff;
}
jQuery Code edits
tabList = slideList.siblings('.carouselLinks, .bulletLinks'),
https://jsfiddle.net/tk48ecxb/24/
Here is an example of the code I'm working with. It works fairly well with larger sizes but it breaks the small size boxes. Not sure why its moving them when removing resized boxes, that isn't happening in the actual project I'm working on. Need the boxes, which are actually svg's in the project, to fill the width of the larger boxes and not really be choppy or attach in weird ways.
Also, anyway to trigger an event when all boxes are filled?
HTML
<div class="top-row">
<ul class="holderList">
<li class="holder" id="large"></li>
<li class="holder" id="medium"></li>
<li class="holder" id="small"></li>
<li class="holder" id="tiny"></li>
</ul>
</div>
<div class="bottom-row">
<ul>
<li class="square" id="square1">
</li>
<li class="square" id="square2"></li>
<li class="square" id="square3"></li>
<li class="square" id="square4"></li>
</ul>
</div>
CSS
ul li{
border: 1px solid black;
display: inline-block;
}
.holderList > li{
margin: 20px;
}
#large{
height: 200px;
width: 200px;
}
#medium{
height: 150px;
width: 150px;
}
#small{
height: 100px;
width: 100px;
}
#tiny{
height: 50px;
width: 50px;
}
.square{
height: 60px;
width: 60px;
background: green;
}
JS
$(".square").draggable({
drag: function(event, ui) {
var draggable = $(this).data("ui-draggable");
$.each(draggable.snapElements, function(index, element) {
ui = $.extend({}, ui, {
snapElement: $(element.item),
snapping: element.snapping
});
if (element.snapping) {
if (!element.snappingKnown) {
element.snappingKnown = true;
draggable._trigger("snapped", event, ui);
}
} else if (element.snappingKnown) {
element.snappingKnown = false;
draggable._trigger("snapped", event, ui);
}
});
},
snap: ".holder",
snapMode: "inner",
snapped: function(event, ui) {
var squareWidth = ui.snapElement.width();
var squareHeight = ui.snapElement.height();
ui.helper.css({width: squareWidth, height: squareHeight});
}
});
All I need to do was add snapTolerance apparently.
Now to figure out how to create a popup if all windows are filled.