{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Configuraciones
{% endblock titulo %}
{% block content1 %} 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable {   padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable({
       drag: function(event,ui){ 
          //console.log(ui.position);
      }
    });

    $( "#draggable" ).data({

    });
  });
    
  </script> 
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-header bgm-bluegray text-center"> <h2>Diseño</h2></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                           <div id="draggable" class="ui-widget-content col-sm-4">
                              <p>Drag me to my target</p>
                            </div>
                             
                            <div id="droppable" class="ui-widget-header col-sm-8">
                              <p>Drop here</p>
                            </div>
                        </div>
                    </div>

                </div>
              </div>
          </div>
        </div>
 
{% endblock content1 %}