Youtube filmpjes online playlist maken - Forum

Kris Peeters

21-08-2013 16:13 gewijzigd op 21-08-2013 16:13

Mikey jansen op 21/08/2013 11:40:56

... dat mensen daar bijvoorbeeld 10 filmpjes of 6 of 8 dus een willekeurig aantal kunnen slepen en in de juiste volgorde zetten...

Laat me hier al mee beginnen.
Dit is op zich al iets waar wat werk aan is.

Jij kunt die items vullen met thumbnails van de video's.
iets als <div data-index="0"><img src="..."></div>
Maak je trouwens die thumbnais zelf aan?

Voorbeeld:


<!doctype html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
    $(document).ready(function() {
      $('#source div').draggable({
      });
      $( "#target" ).sortable({
        update: function() {
          // voorlopig doen we hier niets
        }
      });
      $( "#target" ).droppable({
        drop: function( event, ui ) {
          // notice: $(this) is the drop area
          // $(ui.draggable) is the dropped object
          
          // check if the dropped item is a newly dropped item or an item being sorted.
          if ($(ui.draggable).parent()[0] === $(this)[0]) {
            // the item is already inside the drop area
          }
          else {
            // the item is droppen inside the drop area
            // we will copy/clone the object and put the clone in the target.
            var clone = $(ui.draggable).clone();
            $(ui.draggable).remove();
            clone.appendTo(this).removeAttr('style').removeAttr('class');
            
            $( "#target" ).sortable('refresh').disableSelection();
          }
        }
      });
    });
    </script>
    <style>
    #source div, #target div {
      border: 1px solid #999999;
      margin: 10px;
      width: 80px;
      cursor: pointer;
    }
    #target {
      width: 400px;
      height: 400px;
      border: 1px solid #999999;
      position: relative;
    }
    #source {
      width: 400px;
      height: 400px;
      border: 1px solid #999999;
      position: relative;
    }
    </style>
  </head>
  <body>
    <div id="source">
      <div data-index="0">item 0</div>
      <div data-index="1">item 1</div>
      <div data-index="2">item 2</div>
      <div data-index="3">item 3</div>
      <div data-index="4">item 4</div>
      <div data-index="5">item 5</div>
      <div data-index="6">item 6</div>
    </div>
    <div id="target">
    </div>
  </body>
</html>