From 3032b4ec8d8371f2daab1bfa232101c46ad72904 Mon Sep 17 00:00:00 2001 From: Alex Ayyubov Date: Tue, 19 Aug 2014 17:01:49 +0100 Subject: [PATCH 1/2] 1. Made Nestable to work with touch and mouse available hybrid laptop browsers where both event types are supported 2. Made it to work with IE7 and 8 --- jquery.nestable.js | 63 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 53 insertions(+), 10 deletions(-) diff --git a/jquery.nestable.js b/jquery.nestable.js index 0405cf1..41346ea 100644 --- a/jquery.nestable.js +++ b/jquery.nestable.js @@ -4,7 +4,10 @@ */ ;(function($, window, document, undefined) { - var hasTouch = 'ontouchstart' in window; + var hasTouch = 'ontouchstart' in document; + + // This is for making it touch and mouse available hybrid laptops + var hasMouse = 'onmousedown' in document; /** * Detect CSS pointer-events property @@ -52,7 +55,9 @@ function Plugin(element, options) { - this.w = $(window); + // The below code is original, and hence was failing IE7 and 8 as window has no mousedown and up events + // this.w = $(window); + this.w = $(document); this.el = $(element); this.options = $.extend({}, defaults, options); this.init(); @@ -98,18 +103,34 @@ } handle = handle.closest('.' + list.options.handleClass); } - if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) { + // This is original, e.button definitions are different in IE7 and 8 browsers + // Also made condition to handle touch and mouse available hybrid laptops + + // if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) { + if (!handle.length || list.dragEl || (!hasTouch && e.button && e.button > 1) || (hasTouch && e.touches && e.touches.length !== 1)) { return; } e.preventDefault(); - list.dragStart(hasTouch ? e.touches[0] : e); + + // list.dragStart(hasTouch ? e.touches[0] : e); + if (hasTouch && hasMouse) { + list.dragStart(e.touches ? e.touches[0] : e); + } else { + list.dragStart(hasTouch ? e.touches[0] : e); + } }; var onMoveEvent = function(e) { if (list.dragEl) { e.preventDefault(); - list.dragMove(hasTouch ? e.touches[0] : e); + + //list.dragMove(hasTouch ? e.touches[0] : e); + if (hasTouch && hasMouse) { + list.dragMove(e.touches ? e.touches[0] : e); + } else { + list.dragMove(hasTouch ? e.touches[0] : e); + } } }; @@ -117,19 +138,41 @@ { if (list.dragEl) { e.preventDefault(); - list.dragStop(hasTouch ? e.touches[0] : e); + + //list.dragStop(hasTouch ? e.touches[0] : e); + if (hasTouch && hasMouse) { + list.dragStop(e.touches ? e.touches[0] : e); + } else { + list.dragStop(hasTouch ? e.touches[0] : e); + } } }; + // In order to support touch and mouse available hybrid laptops + // we need to listen for both touch and mouse events + + // if (hasTouch) { + // list.el[0].addEventListener(eStart, onStartEvent, false); + // window.addEventListener(eMove, onMoveEvent, false); + // window.addEventListener(eEnd, onEndEvent, false); + // window.addEventListener(eCancel, onEndEvent, false); + // } else { + // list.el.on(eStart, onStartEvent); + // list.w.on(eMove, onMoveEvent); + // list.w.on(eEnd, onEndEvent); + // } + if (hasTouch) { list.el[0].addEventListener(eStart, onStartEvent, false); window.addEventListener(eMove, onMoveEvent, false); window.addEventListener(eEnd, onEndEvent, false); window.addEventListener(eCancel, onEndEvent, false); - } else { - list.el.on(eStart, onStartEvent); - list.w.on(eMove, onMoveEvent); - list.w.on(eEnd, onEndEvent); + } + + if (hasMouse) { + list.el.on('mousedown', onStartEvent); + list.w.on('mousemove', onMoveEvent); + list.w.on('mouseup', onEndEvent); } }, From 9132dea0d69b280178522668c78193a72c1bb5e9 Mon Sep 17 00:00:00 2001 From: David Bushell Date: Fri, 28 Apr 2017 08:47:05 +0100 Subject: [PATCH 2/2] Update index.html fix https --- index.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index bb950f8..caed324 100644 --- a/index.html +++ b/index.html @@ -137,6 +137,12 @@ .dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; } .dd3-handle:hover { background: #ddd; } +/** + * Socialite + */ + +.socialite { display: block; float: left; height: 35px; } + @@ -145,7 +151,14 @@

Nestable

Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)

-

Code on GitHub

+

Download on GitHub

+ +
+ +
+

PLEASE NOTE: I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.

@@ -248,9 +261,9 @@

Nestable

-

Copyright © David Bushell | Made for Browser

+

Copyright © David Bushell | Made for Browser

- +