Me gustaría hacer el div innerDropzone arrastrarse por debajo de la código:

CSS:

 div.example {
   width: 560px;
   height: 750px;
   display: block;
   padding: 10px 20px;
   color: black;
   background: rgba(255, 255, 255, 0.4);
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   margin-bottom: 10px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   position: relative;
   float: left;
   margin-right: 40px;
 }
 #dropzone {
   height: 530px;
   width: 530px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 2px dashed #0687FF;
   display: block;
   background-image: url(/Images/RE/02.png);
 }
 #imgzone {
   height: 150px;
   width: 150px;
   overflow: auto;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 2px groove #0687FF;
   float: left;
 }

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<div class="example">
  <div id="dropzone" style="text-align: center; float: left">
    <div id="innerDropzone" style="position: absolute; top: 20px; left: 30px; width: 250px; height: 250px">
      <img style="display: none;" id="img" src="nothing" />
    </div>
    <div id="hint" style="position: absolute; top: 22%; left: 30%;">Drop in images from your desktop</div>
  </div>
  <div id="imgzone">
    <div id="imagelist">
      <img id="sampleImg" src="/Images/RE/02.png" width="100px" height="100px" style="margin: 10px;" />
    </div>
  </div>
</div>

He intentado hacer que el DIV que pueden arrastrarse como a continuación sin embargo no pudo:

$('#innerDropzone').draggable();
  • Se puede añadir en jsfiddle?
  • Definir «error» para nosotros. Está usted recibiendo errores en el navegador de la consola (presione F12)? No hay errores, pero nada de lo que está sucediendo con el elemento? Está pasando algo, pero no es lo que quieres/espera (si es así, explique qué es lo que quiero/espera)?
  • no hay errores pero nada de lo que está sucediendo con el elemento
  • están incluidos jquery-ui.js ??? la posibilidad de arrastrar() es proporcionado por jQuery-UI
  • parece ser que desee para hacer desechables en lugar
  • Por favor vea mis actualizado pregunta. Hice incluye todo lo necesario JQuery

InformationsquelleAutor SuicideSheep | 2013-10-01

6 Comentarios

  1. 1

    Para Jquery-ui versión 1.8.23 no es compatible con jquery 1.9.1. (como por lo que tengo experiencia)

    Sin embargo, como he encontrado en este Wiki enlace Jquery-ui 1.8.23 es compatible con Jquery 1.3.2+.

    Puedo probar tu código html con la última de las bibliotecas, todo está funcionando bien..aquí es el violín

    Por lo que es Jquery UI y Jquery biblioteca problema de compatibilidad. Utilice la última versión compatible o bibliotecas.

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  2. 1

    Si usted sólo tiene que hacer un div que se pueden arrastrar, por favor, trate de seguir mi script en jQuery, trabajando también en dispositivos táctiles.

    ;(function ($, window, document, undefined) {
    var $canvas = $('#canvas'),
    canvT = $canvas.offset().top,
    canvL = $canvas.offset().left,
    $elem = $('<div/>', {
    'class': 'ball'
    }),
    offL = 0,
    offT = 0,
    dragging = 0,
    touchDev = 0;
    var onDrop = function onDrop(e) {
    $(document).off('mousemove.dp');
    $(document).off('mouseup.dp');
    dragging = 0;
    };
    var onDrag = function onDrag(e) {
    $elem.css({
    'left': e.pageX - canvL + offL,
    'top': e.pageY - canvT + offT
    });
    };
    $elem.appendTo($canvas);
    if ('touchstart' in window) {
    touchDev = 1;
    }
    //touchDev = 1;
    if (touchDev === 0) {
    console.log('mousedown');
    $elem.on('mousedown', function (e) {
    if (dragging === 0) {
    offL = $(this).offset().left - e.pageX;
    offT = $(this).offset().top - e.pageY;
    }
    dragging = 1;
    $(document).on('mousemove.dp', onDrag);
    $(document).on('mouseup.dp', onDrop);
    });
    } else {
    $elem.on('touchstart', function(event) {
    var e = event.originalEvent;
    var touch = e.targetTouches[0];
    offL = $(this).offset().left - touch.pageX;
    offT = $(this).offset().top - touch.pageY;
    });
    $elem.on('touchmove', function(event) {
    var e = event.originalEvent,
    touch;
    if (e.targetTouches.length == 1) {
    touch = e.targetTouches[0];
    onDrag(touch);
    }
    });
    }
    })(jQuery, window, document);

    CSS

    * {
    margin: 0;
    padding: 0;
    }
    #canvas {
    position: relative;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 300px;
    border: 1px solid;
    }
    .ball {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: green;
    border-radius: 9999px;
    }

    JS Bin
    http://output.jsbin.com/joweca/

  3. 0
     <img style="display: none;" id="img" src="nothing"/>

    Cómo vas a poder ver elemento de imagen dentro de visualización ninguno, darle estilo como

    #innerDropzone { width: 150px; height: 150px; padding: 0.5em; border:1px solid #000; }

    Es la posibilidad de arrastrar, de verificación aquí

    • Esto es en realidad la combinación con una función de arrastrar y soltar y la pantalla cambiará a bloquear al usuario colocar una imagen en el área.
  4. 0

    Cosa nada grande mal en su código. Pareciendo que estás usando JQuery $('#innerDropzone').draggable(); en la etiqueta head.
    Basta con ponerla en función de como este:

    $(function () {
    $('#innerDropzone').draggable();
    });

Dejar respuesta

Please enter your comment!
Please enter your name here