# Advance interface objects

**URL:** <https://forum.bubble.io/t/advance-interface-objects/2746>\
**Category:** Implemented\
**Created:** [May 3, 2016, 6:03pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746 "2016-05-03T18:03:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kfawcett](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kfawcett/32/38097_2.png) [@Kfawcett](https://forum.bubble.io/u/Kfawcett)\
**Post date:** [May 3, 2016, 6:03pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/1 "2016-05-03T18:03:30Z")

</div>

It would be nice to have the ability to drag and drop items like this. 🙂

![](https://us1.discourse-cdn.com/bubble/original/2X/c/c6120abb7e37b7346c619670ae07fae06c4f17fc.gif)

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [May 3, 2016, 6:25pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/2 "2016-05-03T18:25:26Z")

</div>

In run mode you mean? How would it work? What kind of event would be attached to the element?

---

<div class="post-metadata">

**Author:** ![raymond](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raymond](https://forum.bubble.io/u/raymond)\
**Post date:** [May 3, 2016, 6:35pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/3 "2016-05-03T18:35:41Z")

</div>

I would use it to build a process management app

---

<div class="post-metadata">

**Author:** ![andrewgassen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/andrewgassen/32/44248_2.png) [@andrewgassen](https://forum.bubble.io/u/andrewgassen)\
**Post date:** [May 3, 2016, 6:38pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/4 "2016-05-03T18:38:54Z")

</div>

I’m making this up as a type, and in no way speak for @Kfawcett, so this is my own suggestion. I would imagine we have an element called a “Droppable” or “Droppable Group” that would serve as the basis for the element you can drag around. There’d be another element type called “Drop Zone,” and we’d be tracking “When Droppable A is in Drop Zone 1…”

The conditions for a Droppable might look like:

- Is Being Dragged
- Is/is not Draggable

While the conditions for a Drop Zone might be:

- Is/is not Active (accepting things to be dragged into it)

The drop zone would function somewhat like a repeating group, where each item in a drop zone would have to have an index associated with it for positioning purposes (assuming they snap in place). So under the hood, you might have the concept of “Draggable A is in index 0 of Drop Zone 1”

---

<div class="post-metadata">

**Author:** ![raymond](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raymond](https://forum.bubble.io/u/raymond)\
**Post date:** [May 3, 2016, 6:46pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/5 "2016-05-03T18:46:41Z")

</div>

I would like it if it could be done like the Bubble elements we use because then I can start using bubble for my clients business process management apps instead of the systems I’m using now.  
I.e.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/6/61640de9c94abce0a21c8d20b86369df6e87526d.png)

Or  
 ![](https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzAGssZe9nrp07p5dLzurhMTsZbKQNGg9CB3-8J7oVjqz2A2yC)

---

<div class="post-metadata">

**Author:** ![Kfawcett](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kfawcett/32/38097_2.png) [@Kfawcett](https://forum.bubble.io/u/Kfawcett)\
**Post date:** [May 3, 2016, 7:01pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/6 "2016-05-03T19:01:44Z")

</div>

@emmanuel, yes, in run mode.

Couple of use cases I can think of.

1. It allows you to build apps like the screenshot (a Kanban Board) that allows you to move items between statuses. During the move it updates a field on the item being moved based on what you define as the criteria for the containers you’re dragging between.

2. In the past I’ve used this type of thing in the WordPress admin menu screen. You are able to reposition top level menu items or making them a child of a top level menu item just by dragging them around.

3. You could build a Solitare game. 🙂

Not sure how you could control the positioning though. For instance, in use case 1 the items would need to be able to snap into one of the columns once you got close to center.

---

<div class="post-metadata">

**Author:** ![Kfawcett](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kfawcett/32/38097_2.png) [@Kfawcett](https://forum.bubble.io/u/Kfawcett)\
**Post date:** [May 3, 2016, 7:07pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/7 "2016-05-03T19:07:04Z")

</div>

Here’s an example of code available on github for this type of functionality. [http://bevacqua.github.io/dragula/](http://bevacqua.github.io/dragula/)

---

<div class="post-metadata">

**Author:** ![Bradluffy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bradluffy/32/955_2.png) [@Bradluffy](https://forum.bubble.io/u/Bradluffy)\
**Post date:** [May 3, 2016, 7:31pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/8 "2016-05-03T19:31:12Z")

</div>

Well S%%$ this is a great idea. I love this concept. It will really blow open a new range of possibilities and dramatically improve the user experience in a wide variety of applications.

---

<div class="post-metadata">

**Author:** ![Bradluffy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bradluffy/32/955_2.png) [@Bradluffy](https://forum.bubble.io/u/Bradluffy)\
**Post date:** [May 3, 2016, 7:32pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/9 "2016-05-03T19:32:06Z")

</div>

I too would love to see this kind of capability. I do process management all day and have been seeking ways to incorporate that into the apps I build.

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [May 3, 2016, 7:35pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/10 "2016-05-03T19:35:28Z")

</div>

I’ll think about it, no promise though, it’s a bit of a project.

---

<div class="post-metadata">

**Author:** ![Kfawcett](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kfawcett/32/38097_2.png) [@Kfawcett](https://forum.bubble.io/u/Kfawcett)\
**Post date:** [May 3, 2016, 7:43pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/11 "2016-05-03T19:43:16Z")

</div>

@emmanuel I think we’ve got two different request going here though. @Bradluffy and @raymond seem to want some type of Business Process Management tool and I’m looking more for a way to just drag n’ drop and sort items between containers and have the ability to define workflow based on those actions (dragging between different containers).

I think the BPM tool, with a process modeler, would be a larger undertaking – probably something like [http://bpmn.io/](http://bpmn.io/)

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [May 3, 2016, 7:44pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/12 "2016-05-03T19:44:48Z")

</div>

Yes, I know. Again, interesting idea, that’s not the next thing on the list though (except if it’s necessary business wise, we can talk about sponsoring then).

---

<div class="post-metadata">

**Author:** ![lonetour](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lonetour/32/536_2.png) [@lonetour](https://forum.bubble.io/u/lonetour)\
**Post date:** [May 3, 2016, 8:37pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/13 "2016-05-03T20:37:45Z")

</div>

Yes! Being able to select items from a repeating group and drop them somewhere else to modify the data on them would be awesome UX!!

Will we be able to get that done before we launch beta version on May 10th? 😍

---

<div class="post-metadata">

**Author:** ![andrewgassen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/andrewgassen/32/44248_2.png) [@andrewgassen](https://forum.bubble.io/u/andrewgassen)\
**Post date:** [May 3, 2016, 8:39pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/14 "2016-05-03T20:39:04Z")

</div>

Haha, you’re a funny guy. I can’t imagine drag/drop on a custom platform like Bubble is a weeklong task. That being said, I would be very interested in pooling some money together to sponsor the feature. Anybody else interested?

---

<div class="post-metadata">

**Author:** ![kcannick](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@kcannick](https://forum.bubble.io/u/kcannick)\
**Post date:** [May 4, 2016, 5:45pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/15 "2016-05-04T17:45:26Z")

</div>

I may be interested in contributing to sponsorship pool

---

<div class="post-metadata">

**Author:** ![lonetour](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lonetour/32/536_2.png) [@lonetour](https://forum.bubble.io/u/lonetour)\
**Post date:** [May 4, 2016, 7:06pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/16 "2016-05-04T19:06:16Z")

</div>

I’m afraid I’m spending all my spare cash on my non-coder. Keep me in the loop if things start moving though.

---

<div class="post-metadata">

**Author:** ![topdog.revolution](https://avatars.discourse-cdn.com/v4/letter/t/e56c9b/32.png) [@topdog.revolution](https://forum.bubble.io/u/topdog.revolution)\
**Post date:** [May 5, 2016, 7:35pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/17 "2016-05-05T19:35:43Z")

</div>

I’m not really a coder and don’t understand much of how this works. But I was part of the product team that built a similar kanban style app. We had built all the structural stuff and wanted to integrate drag and drop.

I didn’t really understand much of the details but we wrote a code that remembered the position of an item in terms of numbers. 1,2,3,4 etc. And then a thing that let users drag and drop items from one place to another and the position got saved in our database.

So that’s what my idea is based on.

I’m assuming any repeater group displays data based on a certain logic. (Date of creation ascending or descending etc).  
So what if we could add a function to repeater groups that assigns a particular position to every cell. ie. 1,2,3,4 etc.

Then we could give some sort of thing that let’s the end user drag one cell to another position and the repeater group remembers that. That would allow the creation of Kanban boards and other cool stuff.

---

<div class="post-metadata">

**Author:** ![asabti](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@asabti](https://forum.bubble.io/u/asabti)\
**Post date:** [May 10, 2016, 2:14pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/18 "2016-05-10T14:14:32Z")

</div>

Would love to have this feature. This is the one thing that Bubble doesn’t have that’s keeping me from using it

---

<div class="post-metadata">

**Author:** ![Bradluffy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bradluffy/32/955_2.png) [@Bradluffy](https://forum.bubble.io/u/Bradluffy)\
**Post date:** [May 10, 2016, 2:38pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/19 "2016-05-10T14:38:46Z")

</div>

How much do we need to raise?

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [May 10, 2016, 7:52pm UTC](https://forum.bubble.io/t/advance-interface-objects/2746/20 "2016-05-10T19:52:42Z")

</div>

Please get in touch for this, easier to talk about $$ by email first, though i’d expect this to be a topic here if a crowdfunding thing happens (which i’d love to see happen).

[Next page](https://forum.bubble.io/t/advance-interface-objects/2746.md?page=2)
