drag ans drop conception

drag ans drop conception

  1. I want a drag and drag.
    Is it possible to do drags in two different blocks?
    My drag works in one direction: "ul#list li" to "ul#drop".
    I would also like to do: drop ul li # # ul to list

    I also have a problem with
    $. event.dataTransfer.dropEffect = "move";
    Indeed it does not work.
    Thanks you
    html :
    <div id="container">
    <header>

    </header>
    <h2>Le drag and drop avec HTML5 et jQuery</h2>
    <div id="texteFond">
    drag me
    </div>
       <ul id="liste">
         <li draggable="true" id="aaa">A</li>
         <li draggable="true" id="bbb">B</li>
         <li draggable="true" id="ccc">C</li>
         <li draggable="true" id="ddd">D</li>
       </ul>

       <ul id="drop"></ul>
    </div><!-- #main -->
    <footer>

    </footer>
    </div><!-- #container -->
    1. So I clone the draggable element then I suprimmer to emulate this behavior
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  1. <script>

  1. //$.event.props.push('dataTransfer');

  1. //$.event.dataTransfer.dropEffect="move";

  1. //var tab=[];

  1. $(document).ready(function() {


  1. $('ul#drop li').bind('dragstart',function() {

  1. $this2 = $(this);

  1. $(this).css('opacity', '0.5');

  1. });

  1.    var i, $this, $drop = $('#drop');

  1.    $('ul#drop,ul#liste li').on({

  1.        // on commence le drag

  1.        dragstart: function(e) {

  1. //e.dataTransfer.effectAllowed = 'move';

  1.            $this = $(this);

  1.            //i = $(this).index();

  1.            $(this).css('opacity', '0.5');

  1.            // on garde le texte en mémoire

  1.            //e.dataTransfer.setData('Text', $(this).html());

  1.        },

  1.        // on passe sur un élément draggable

  1.        dragenter: function(e) {

  1.            // on augmente la taille pour montrer le draggable

  1.            $this.animate({

  1.                width: '90px'

  1.            }, 'fast');

  1.            e.preventDefault();

  1.        },

  1.        // on quitte un élément draggable

  1.        dragleave: function() {

  1.            // on remet la taille par défaut

  1.            $this.animate({

  1.                width: '75px'

  1.            }, 'fast');

  1.        },

  1.        // déclenché tant qu on a pas lâché l élément

  1.        dragover: function(e) {

  1.            e.preventDefault();

  1.        },

  1.        // on lâche l élément

  1.        drop: function(e) {

  1. //var data = e.dataTransfer.getData('Text');

  1. //alert(data);

  1. /*

  1. if(tab.length){

  1. if(tab.indexOf(i) == -1) { 

  1. tab.push(i);

  1. $this.clone().prependTo($drop).fadeTo(500,1).delay(1000);

  1. $this.remove();

  1. //$drop.append('<li id="'+$this.attr('id')+'" draggable="true">'+data+'</li>').fadeIn('slow').delay(1000);

  1. }else{

  1. alert('existe déjà');

  1. }

  1. }else{

  1. tab.push(i);

  1. $this.clone().prependTo($drop).fadeTo(500,1).delay(1000);

  1. $this.remove();

  1. //$drop.append('<li id="'+$this.attr('id')+'" draggable="true">'+data+'</li>').fadeIn('slow').delay(1000);

  1. }

  1. */

  1. $this.clone().prependTo($drop).fadeTo(500,1).delay(1000);

  1. $this.remove();


  4.                // on met le nouveau texte à la place de l ancien et inversement

  1.               // $this.html($(this).html());

  1.               // $(this).html(data);


  4.            // on remet la taille par défaut

  1.            $this.animate({

  1.                width: '75px'

  1.            }, 'fast');

  1.        },

  1.        // le drop est terminé, fin du drag

  1.        dragend: function() {

  1.            $(this).css({

  1. 'opacity': '1'

  1. });

  1.        },

  1.        // au clic sur un élément

  1.        click: function() {

  1.            //$(this).remove();

  1.        }

  1.    });