I'm struggling with a problem relating to a drag and drop system. I’m designing a complex system that allows the user to configure a decision tree to get to a price value.

This system simplified is identical to the one on the mockup below.

enter image description here

I’m using a drag and drop approach to allow the user to add “Taxes“ to products. This approach works well if you want to add only one tax to a product at a time. I drag a value from the right column to the tree individually.

My problem is that i want to allow adding multiple taxes to multiples products at the same time, for example, I want to add taxes 3 and 4 to products 1 and 3 at the same time.

It´s easy to select multiple taxes at the same time, but how about adding them to the tree?

Do you have any suggestions?

Thanks for your help


Not sure that drag and drop is the right solution for this problem. Users commonly associate drag and drop to moving from one list to another permanently. The tax options would not be unique to a product, meaning that each tax can be added to any number of products, and would reappear in the list of taxes. Another issue that might arise once the user starts dragging to the right grid of products, but the drop zone could be ambiguous as to which of the multiple products to drop it on. The grid would need to indicate that the drop zone for the items you are dragging is available anywhere on the grid of products or specifically on a selected product.

A different, suitable approach is to allow the user to select multiple taxes from the list on the left and have them select the products from the right. They would then add the taxes to the selected products on the right via a link or button.

  • Hello @rossbot, thanks for your comment. I’m also trying something like you suggested, like a list builder, but i have the same problem with that approach. Adding the same tax to 2 different products at the same time. I’am afraid that selecting two diferente destinations and expecting that the values will be duplicated in each product will not sound natural for the user ( see this link : i.snag.gy/DySFe.jpg ) what do you think ? I Think that naturally the user will try to drag de values from left to right, but i think that it’s importante to have an “button” like alternative. – anglc May 29 '15 at 9:38
  • The text on the button could give some insight, like "Add to Each Product" or "Add to Product(s)". This would let the user know that when they click the button that the action will affect multiple products, if multiple are selected. – Rossbot May 29 '15 at 14:23

Well you can do the different taxes to the different product by using several techniques but i find it best and suitable you need to drag the tax 3 to product 1 and it will be highlighted and just drop it on 1 and say 7.3% of tax will be calculated on the amount for product a and similarly you can drag the tax 4 to product 3 and tax of say 12% will be calculated on product 3 only and then you can calculate the sum and display it

Ps: drag drop and highlight effect will be like when we drag a file and drop it inside a folder in windows can be used Hope it helps

  • Thanks for your contribution! The actual context is more complex than one model not represented . It will necessary to allow add ten values from the left list ​​( taxes ) to more than one point ( Products) on the right. – anglc May 29 '15 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.