web-dev-qa-db-fra.com

Une simple DIV déplaçable utilisant jQuery-UI

Je voudrais faire la div innerDropzone draggable pour code ci-dessous:

 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;
 }
<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>

J'ai essayé de rendre la DIV déplaçable comme ci-dessous, mais cela a échoué:

$('#innerDropzone').draggable();
jqueryhtmlcssjquery-ui
9
Isaac Lem

Pour Jquery-ui, la version 1.8.23 n'est pas compatible avec jquery 1.9.1. (selon ce que je ressens)

Cependant, comme j'ai trouvé sur ce lien Wiki Jquery-ui 1.8.23 est compatible avec Jquery 1.3.2+.

Je teste votre html avec les dernières bibliothèques, tout fonctionne bien .. voici fiddle

Il s’agit donc d’un problème de compatibilité entre Jquery UI et la bibliothèque Jquery. Utilisez les bibliothèques les plus récentes ou compatibles.

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

Si vous avez seulement besoin de rendre une division glissable, essayez de suivre mon script dans jQuery, en travaillant également sur les appareils tactiles.

;(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/

1
itacode
 <img style="display: none;" id="img" src="nothing"/>

Comment vous pourrez voir un élément quand une image à l'intérieur n'affiche rien

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

C'est glissable, vérifiez ici

0
Eez

Regardez un exemple sur ce site Web, il montre un code assez simple pour utiliser jquery drag and drop. Http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example

0
cmsonnet

Je pense que rien dans votre code ne va pas mal. En supposant que vous utilisez JQuery $('#innerDropzone').draggable(); dans la balise head. 
Enveloppez-le simplement dans les fonctions suivantes:

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

voir ce site http://jqueryui.com/draggable/ il contient un guide pour faire ce que vous essayez de faire. Assurez-vous également dans votre exemple que vous référencez la bibliothèque jQuery.

0
Adam 'Sacki' Sackfield