9

我想让innerDropzone下面的代码可以拖动 div：

 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();
4

6 回答 6

1

如果您只需要使 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 斌 http://output.jsbin.com/joweca/

于 2015-07-01T03:44:28.943 回答
1

对于 Jquery-ui 版本 1.8.23 与 jquery 1.9.1 不兼容。（根据我的经验）

但是，正如我在此Wiki 链接上发现的那样， Jquery-ui 1.8.23 与 Jquery 1.3.2+ 兼容。

我用最新的库测试你的 html，一切正常..这是小提琴

所以这是 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>
于 2015-07-24T05:30:59.107 回答
0

看到这个网站http://jqueryui.com/draggable/它有一个指南来做你想做的事情。还要确保在您的示例中您引用的是 jQuery 库

于 2013-10-01T10:20:46.327 回答
0 
 <img style="display: none;" id="img" src="nothing"/>

当里面的图像没有显示时，你将如何看到元素，给它像

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

可以拖动，看这里

于 2013-10-01T10:21:32.440 回答
0

看看这个网站上的例子，它显示了使用 jquery 拖放的非常简单的代码。 http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example

于 2013-10-01T11:44:02.353 回答
0

我觉得你的代码没什么大问题。似乎您$('#innerDropzone').draggable();在 head 标签中使用了 JQuery。
只需将它包装在这样的函数中：

$(function () {
    $('#innerDropzone').draggable();
});
于 2015-07-08T21:00:10.867 回答