uparrow/assets/front_end/js/example.js

$(document).ready(function(){
    'use strict';
    var url1;
    dragula([$('left-defaults'), $('right-defaults'),$('test1'),$('test2')],{
        //alert(1);
        revertOnSpill: true,
        direction: 'horizontal',
        moves: function (el, container, handle) {
            return true;         // elements are always draggable by default
        },
        accepts: function (el, target, source, sibling) {
            //console.log(source.id);
            if(source.id=='left-defaults' && target.id=='right-defaults'){
                url1=drag_url+"/"+el.id+"/no";
                return true;
            } else if(source.id=='right-defaults' && target.id=='left-defaults'){
                url1=drag_url+"/"+el.id+"/no";
                return true;
            } else if(source.id=='right-defaults' && target.id=='test1'){
                url1=drag_url+"/"+el.id+'/yes';
                return true;
            } else if(source.id=='test1' && target.id=='test2'){
                url1=drag_url+"/"+el.id+'/no';
                return true;
            } else if(source.id=='test2' && target.id=='test1'){
                url1=drag_url+"/"+el.id+'/no';
                return true;
            }
        },
        invalid: function (el,target) {
            return false; // don't prevent any drags from initiating by default
        } 
    }).on('drop',function (el) {
        //var url=drag_url+"/"+el.id+"/no";
        var hr = new XMLHttpRequest();
        hr.open("GET",url1 , true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        alert(return_data);
                }
        }

         hr.send(); 
    });
    /*dragula([$('test1'), $('test2')],{
        revertOnSpill: true,
        direction: 'horizontal',
        moves: function (el, container, handle) {
            return true;         // elements are always draggable by default
        },
        accepts: function (el, target, source, sibling) {
            //console.log(source.id);
            if(source.id=='test1' && target.id=='test2'){
                return true;
            } else if(source.id=='test2' && target.id=='test1'){
                return true;
            } else if(source.id=='right-defaults' && target.id=='test1'){
                return true;
            }
        },
        invalid: function (el,target) {
            return false; // don't prevent any drags from initiating by default
        } 
    }).on('drop',function (el) {
        var url=drag_url+"/"+el.id+"/no";
        var hr = new XMLHttpRequest();
        hr.open("GET",url , true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        alert(return_data);
                }
        }

         hr.send(); 
    });
    /*dragula([$('right-defaults'), $('test1')],{
        revertOnSpill: true,
        direction: 'horizontal',
        moves: function (el, container, handle) {
            return true;         // elements are always draggable by default
        },
        accepts: function (el, target, source, sibling) {
            //console.log(source.id);
            if(source.id=='right-defaults' && target.id=='test1'){
                return true;
            } 
        },
        invalid: function (el,target) {
            return false; // don't prevent any drags from initiating by default
        } 
    }).on('drop',function (el) {
        var url=drag_url+"/"+el.id+'/yes';
        var hr = new XMLHttpRequest();
        hr.open("GET",url , true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        alert(return_data);
                }
        }

         hr.send(); 
    });*/
    var sortable = $('sortable');


    dragula([$('left-copy'), $('right-copy')], { copy: true });
    dragula([$('left-events'), $('right-events')])
      .on('drag', function (el) {
        el.className = el.className.replace('ex-moved', '');

      })
      .on('drop', function (el) {
        el.className += ' ex-moved';
        var droppedElId = $(el).attr('id');
        alert(droppedElId);
      })
      .on('over', function (el, container) {
        container.className += ' ex-over';
      })
      .on('out', function (el, container) {
        container.className = container.className.replace('ex-over', '');
      });
    dragula([$('left-rollbacks'), $('right-rollbacks')], { revertOnSpill: true });
    dragula([$('left-lovehandles'), $('right-lovehandles')], {
      moves: function (el, container, handle) {
        return handle.classList.contains('handle');
      }
    });

    dragula([$('left-rm-spill'), $('right-rm-spill')], { removeOnSpill: true });
    dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], {
      copy: function (el, source) {
        return source === $('left-copy-1tomany');
      },
      accepts: function (el, target) {
        return target !== $('left-copy-1tomany');
      }
    });

    dragula([sortable]);

    crossvent.add(sortable, 'click', clickHandler);

    function clickHandler (e) {
      var target = e.target;
      if (target === sortable) {
        return;
      }
      target.innerHTML += ' [click!]';

      setTimeout(function () {
        target.innerHTML = target.innerHTML.replace(/ \[click!\]/g, '');
      }, 500);
    }

    function $ (id) {
      return document.getElementById(id);
    }
})