/    Sign up×
Community /Pin to ProfileBookmark

dragable html elements list

I am trying to make some html elements dragable which I have found an open source script for. I wonder if it is possible to just drag and drop the divs if pressing/holding on the numbers? I dont want the whole element to be “grabable” but just the numbers. I hope that someone understands.

[CODE]
createSortable(“#ul”);
createSortable(“#div”);

function createSortable(selector) {
var sortable = document.querySelector(selector);
Draggable.create(sortable.children, {
type: “y”,
bounds: sortable,
edgeResistance: 1,
onPress: sortablePress,
onDragStart: sortableDragStart,
onDrag: sortableDrag,
liveSnap: sortableSnap,
onDragEnd: sortableDragEnd
});
}

function sortablePress() {
var t = this.target,
i = 0,
child = t;
while(child = child.previousSibling)
if (child.nodeType === 1) i++;
t.currentIndex = i;
t.currentHeight = t.offsetHeight;
t.kids = [].slice.call(t.parentNode.children); // convert to array
}

function sortableDragStart() {
TweenLite.set(this.target, { color: “#88CE02” });
}

function sortableDrag() {
var t = this.target,
elements = t.kids.slice(), // clone
indexChange = Math.round(this.y / t.currentHeight),
bound1 = t.currentIndex,
bound2 = bound1 + indexChange;
if (bound1 < bound2) { // moved down
TweenLite.to(elements.splice(bound1+1, bound2-bound1), 0.15, { yPercent: -100 });
TweenLite.to(elements, 0.15, { yPercent: 0 });
} else if (bound1 === bound2) {
elements.splice(bound1, 1);
TweenLite.to(elements, 0.15, { yPercent: 0 });
} else { // moved up
TweenLite.to(elements.splice(bound2, bound1-bound2), 0.15, { yPercent: 100 });
TweenLite.to(elements, 0.15, { yPercent: 0 });
}
}

function sortableSnap(y) {
var h = this.target.currentHeight;
return Math.round(y / h) * h;
}

function sortableDragEnd() {
var t = this.target,
max = t.kids.length – 1,
newIndex = Math.round(this.y / t.currentHeight);
newIndex += (newIndex < 0 ? -1 : 0) + t.currentIndex;
if (newIndex === max) {
t.parentNode.appendChild(t);
} else {
t.parentNode.insertBefore(t, t.kids[newIndex+1]);
}
TweenLite.set(t.kids, { yPercent: 0, overwrite: “all” });
TweenLite.set(t, { y: 0, color: “” });
}
[/CODE]

here is demo: https://codepen.io/jamiejefferson/pen/iFDow

to post a comment
HTMLJavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumApr 25.2018 — No problem when using the sortable feature of jQuery-UI:

https://jsfiddle.net/Sempervivum/qh1c37vb/2/

https://jqueryui.com/sortable/#default
Copy linkTweet thisAlerts:
@bbq1authorApr 25.2018 — I need to use this script.

I tried with this but then only the text is being dragged and not the whole element.
[CODE]
function createSortable(selector) {
var sortable = document.querySelector(selector);
var test = sortable.children.tagName = 'p';
Draggable.create(test, {
type: "y",
bounds: sortable,
edgeResistance: 1,
onPress: sortablePress,
onDragStart: sortableDragStart,
onDrag: sortableDrag,
liveSnap: sortableSnap,
onDragEnd: sortableDragEnd
});

Draggable.create(sortable, {
type: "y",
bounds: sortable
});

}
[/CODE]
×

Success!

Help @bbq1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...