\n {{item.name}}\n
\n\n```\n\n```javascript\nactions: {\n dragStart({ event, element }) {\n let target = element.querySelector('.the-item');\n let { x, y } = element.getBoundingClientRect();\n // Set drag image, positioning it to align with `.the-item`'s position\n event.dataTransfer.setDragImage(target, event.clientX - x, event.clientY - y);\n }\n}\n```\n\n### The determine foreign position action\n\nYou may want to let the user drag items in and out of a list, without letting him rearrange items within a list. In that case the order of items is determined by the app.\n\nHere's a use case. Your CMS allows the admin to put widgets in page areas. The admin panel has a number of lists representing page header, sidebar, footer, etc. The admin is allowed to rearrange widgets to his liking. And there's a list of unused widgets, the admin can drag items to and from that list, but unused items should always be sorted alphabetically.\n\nTo achieve that, pass a closure action `determineForeignPositionAction` into the list of unused items. This will prevent the user from sorting items in that list.\n\nWhen the user drags a foreign items into such a list, the action will be called to determine the position of the item. Essentially, by running that action the `ember-drag-sort` addon asks the host app to suggest desired position of the dragged item.\n\nThe action is only called for foreign items. When the user drags an item out of the unsortable list but then drags the item back, it will appear on its original position.\n\nThe `determineForeignPositionAction` is called with with a single argument -- an object with the following properties:\n\n| Property | Type | Description |\n| :------------ | :---- | :-------------------------------------------- |\n| `draggedItem` | | The item being dragged. |\n| `items` | Array | The list where the item should be positioned. |\n\nThis action must return an **integer** -- the desired position of the item.\n\nThe simplest implementation is to always put the item into the end of the list:\n\n```js\n@action\ndetermineForeignPosition ({/* draggedItem, */items}) {\n return items.length\n}\n```\n\nTo sort items alphabetically, you can use lodash:\n\n```js\n@action\ndetermineForeignPosition ({draggedItem, items}) {\n return _.sortedIndex(items.toArray(), draggedItem)\n}\n```\n\nOr do it by hand:\n\n```js\n@action\ndetermineForeignPosition ({draggedItem, items}) {\n const itemsCopy = items.slice(); // make sure not to mutate the list\n itemsCopy.push(draggedItem);\n itemsCopy.sort((a, b) => a.name.localeCompare(b.name));\n return itemsCopy.indexOf(draggedItem);\n}\n```\n\n**`determineForeignPositionAction` must not actually sort the list**. It's only purpose is to suggest desired item position, which is necessary to display the placeholder.\n\n### Marking a list as a source only bucket\n\nSometimes you may have a need to define a bucket of items that is \"source only\". This means\nthat you can only grab items from it to add to other buckets. The source bucket can never be\nreordered or modified by dragging items out of it. It is only a source to drag to other lists.\n\nThis list would be marked as source only:\n\n```hbs\n![\"kaliber5\"](\"https://www.kaliber5.de/assets/images/kaliber5@2x.png\")
\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","readmeFilename":"README.md","users":{"codebruder":true}}