# 4.7 - Workspace playlist

## Introduction

![Schermafbeelding 2020-06-17 om 12 44 22](https://user-images.githubusercontent.com/47485018/84888923-51ac8600-b098-11ea-86c1-078074fdd1b7.png)

As users need to be able to save tracks they like somewhere in the search process. We decided it would be best to have an empty playlist which is visible from any main search interaction. When a users wish to save this playlist they can enter a name and click the save button, which is not working yet

Users can drag tracks they wish to save for now in this list from the search results: ![be0fbcbef2dab36d289134281d32fd50](https://user-images.githubusercontent.com/47485018/84889525-4a39ac80-b099-11ea-8c20-337153ba377e.gif)

But also from a project page: ![d35add0249b1722fde7b1dc4ffe45d75](https://user-images.githubusercontent.com/47485018/84889668-81a85900-b099-11ea-9ff1-7758746e668f.gif)

## How it works

To keep track of the current state a MutationObserver is made for both the project-page and the search results:

```javascript
const observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
if(mutation){

// this is where the eventListeners are placed
...
}

const results = document.querySelectorAll('.search-results')
const projectPage = document.querySelector('.project-page')

observer.observe(results[0], {
    childList: true,
    attributes: true,
    characterData: true,

})
observer.observe(projectPage, {
    childList: true,
    attributes: true,
    characterData: true,

})
})
```

In order to make the tracks drag n' droppable:

```javascript
//select all draggable tracks
const tracks = document.querySelectorAll('.draggableTrack')
//select the target
const target = document.querySelector('.target-drop')
//current dragging item indicator
let dragged



tracks.forEach(listItem => {
    // attach an eventListener on drag start for each draggable track
    listItem.addEventListener('dragstart', (dragEvent) => {
        // set the value of of each draggable track to the value of the item being dragged
        dragged = event.target
    })

})

target.addEventListener('dragover', (event) => {
    event.preventDefault()
})

document.addEventListener("dragenter", function(event) {

    //changes the color of the background if an item is dragged over the drop target
    if (event.target.className == "target-drop") {
      event.target.style.background = "purple";
    }

  }, false);

  document.addEventListener("dragleave", function(event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "target-drop") {
      event.target.style.background = "";
    }

  }, false);



target.addEventListener("drop", function(event) {
    // prevent default action (open as link for some elements)
    event.preventDefault();

    // move dragged element to the selected drop target
    if (event.target.parentNode.className == "target-drop") {
      event.target.style.background = "";
      // remove the dragged element from the first list
      dragged.parentNode.removeChild( dragged );
      // append the dragged element to the target drop
      event.target.parentNode.appendChild( dragged );
    }
  }, false);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://meijer-nick1.gitbook.io/meesterproef/4-code/4.7-workspace-playlist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.