updating mysql server data after drop

[fischerotto]

Please only use GitHub issues for bug reports and feature requests.

• [ ] Read the contributing guidelines
• [ ] Bug reports containing repro steps are likely to be fixed faster
• [ ] Feature requests should be multi-purpose, describe use cases
• [ ] For support requests or questions, please refer to our Slack channel

[fischerotto]

Since the link to the Slack is broken, I have to write it here. I'm sorry but this is my last hope to get an answer :)

I am trying to update a value in the database after dropping an element with Dragula. (Used languages: php, js)These are the two columns in html:

<li class="task-column task-column-on-hold">
  <span class="task-column-header">
                                                    <h4>Ideas/tasks</h4>
                                                </span>

  <ul class="task-inner-list" id="tasks">
    <li v-for="item in tasks" class="task-item">
      <h4>{{item.name}}</h4>
      <span class="task-time">
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="task-column task-column-in-progress">
                                                <span class="task-column-header">
                                                    <h4>In Progress</h4>
                                                </span>

      <ul class="task-inner-list" id="inprogress">
        <li v-for="item in inprogress" class="task-item">
          <h4>{{item.name}}</h4>
        </li>
      </ul>
    </li>

Here are the elements that I want to move:

tasks: [
  <?php
                        $id = $_GET['id'];
                        $query = query("SELECT * FROM tasks WHERE task_status='task' AND task_project_id=$id");
                        confirm($query);
                        while($row=fetch_array($query)){
                            $task_deadline = date("Y.m.d", strtotime($row['task_deadline']));
                            echo "{
                        id: '{$row['task_id']}',
                        name: '{$row['task_title']}',
                        estimate: '$task_deadline',
                        tracked: false,
                        assigned: [{
                            avatar: 'https://upload.wikimedia.org/wikipedia/en/7/70/Shawn_Tok_Profile.jpg'
                        }, {
                            avatar: 'https://d.fastcompany.net/multisite_files/fastcompany/fc_files/profile/2219225-austin-carr-profile.jpg'
                        }]
                    },";
                        }
                        ?>
]

And here is the implementation of dracula:

function onCreate() {
  $(document).ready(() => {
    dragula([
        document.getElementById('tasks'),
        document.getElementById('inprogress')
      ])

      .on('drag', function(el) {
        el.classList.add('is-moving');
      })

      .on('dragend', function(el) {
        el.classList.remove('is-moving');
        window.setTimeout(function() {
          el.classList.add('is-moved');

          window.setTimeout(function() {
            el.classList.remove('is-moved');
          }, 600);
        }, 100);
      });
  });
}

So my question is: how to get the id of the element that is moving where to call the ajax function after dropping it. I know that this is a big request, but I would really appreciate your help! All the best!

[danieldh00]

i also faced this problem, i fixed it by adding the id as data-id to the draggable element. if you have done that you should be able to do: el['data-id']

for example:

 <li v-for="item in inprogress" class="task-item">
       <h4 data-id="{{ item.id }}">{{item.name}}</h4>
 </li>

js

.on('dragend', function(el) {
        let id = el['data-id'];

        el.classList.remove('is-moving');
        window.setTimeout(function() {
          el.classList.add('is-moved');

          window.setTimeout(function() {
            el.classList.remove('is-moved');
          }, 600);
        }, 100);
      })

I hope this fixes your problem.

[fischerotto]

Hi :)

Thank you for answering! I tried this code out but when do console.log(id); it gives me undifined. Do you know why?

Wishing you the best!

On 24 Oct 2019, at 12:21, danieldh00 notifications@github.com wrote:

i also faced this problem, i fixed it by adding the id as data-id to the draggable element. if you have done that you should be able to do: el['data-id']

for example:

{{item.name}}

js

.on('dragend', function(el) { let id = el['data-id'];

    el.classList.remove('is-moving');
    window.setTimeout(function() {
      el.classList.add('is-moved');

      window.setTimeout(function() {
        el.classList.remove('is-moved');
      }, 600);
    }, 100);
  })

I hope this fixes your problem.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bevacqua/dragula/issues/626?email_source=notifications&email_token=AFZHK4VWS4MHMIUT7VLQH2TQQFSIXA5CNFSM4I2LLBJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECEK4OQ#issuecomment-545828410, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZHK4TKMHO3LPOK43BTMYTQQFSIXANCNFSM4I2LLBJQ.

[alkomaJunior]

You can try with let id = el.getAttribute('data-id'); It works for me.