it-swarm.com.ru

Простой перетаскиваемый DIV с использованием jQuery-UI

Я хотел бы сделать div innerDropzone перетаскиваемым для следующего кода:

 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>

Я попытался сделать DIV перетаскиваемым, как показано ниже, однако это не удалось:

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

Для Jquery-ui версия 1.8.23 не совместима с jquery 1.9.1. (согласно тому, что я испытываю)

Однако, как я обнаружил на этой вики-ссылке Jquery-ui 1.8.23 совместим с Jquery 1.3.2+.

Я проверяю ваш HTML с последними библиотеками, все работает нормально .. вот fiddle

Так что это проблема совместимости с Jquery UI и библиотекой Jquery. Используйте последние или совместимые библиотеки.

<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

Если вам нужно только сделать div перетаскиваемым, попробуйте следовать моему сценарию в jQuery, работая также на сенсорных устройствах.

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

Как вы сможете увидеть элемент, когда на изображении нет изображения, придать ему стиль

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

Это перетаскивается, проверьте здесь

0
Eez

Посмотрите пример на этом сайте, он показывает довольно простой код для использования jquery drag and drop . http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example

0
cmsonnet

В твоем коде нет ничего плохого. Кажется, что вы используете JQuery $('#innerDropzone').draggable(); в заголовке тега. 
Просто оберните это в функцию следующим образом:

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

см. этот сайт http://jqueryui.com/draggable/ у него есть руководство, чтобы делать то, что вы пытаетесь сделать. Также убедитесь, что в вашем примере вы ссылаетесь на библиотеку jQuery

0
Adam 'Sacki' Sackfield