Question

我有这个没有jquery ui的可拖动代码，我想修改它以满足我的要求：

我不希望<p>标记或任何内部<div>标记可拖动。
我需要输入输入字段。

HTML，

<div>
    <p>not draggable</p>
    <input type="text" value="type-able"/>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

我试过以下这些，但它们不起作用，

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

jquery的，

$(function() {
    $('body').on('mousedown', 'div', function(e) {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {

            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() / 2,
                left: e.pageX - $('.draggable').outerWidth() / 2
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});

任何想法我怎么能这样做？

的CSS，

body {padding:50px;}

div {
  cursor:move;
  width:70px;
  height:70px;
  background-color:black;
  border:1px solid black;
  margin:2px;
  float:left;
}

.draggable {
  background-color:yellow;
}

p {
    border:1px solid red;
    background:white;
}

Answer 1

在拖动功能的顶部插入这样的内容：

if(e.target.className == "dontDragMePlease") return;

然后添加

classname="dontDragmePlease"

到你不想用该函数拖动的每个元素。

或者：

if(e.target.tagName == 'INPUT') return;

像这样：

$('body').on('mousedown', 'div', function(e) {
 if(e.target.className == "dontDragMePlease") return;
 if(e.target.tagName == 'INPUT') return;
    $(this).addClass('draggable').parents().on('mousemove', function(e) {

没有jquery ui的draggable：如何停止拖动不可拖动和可键入的元素？

1 个答案: