没有jQuery UI可拖动：如何停止拖动不可拖动和可键入元素？

Question

我有没有jQuery UI的这种拖动代码，我想修改，以适合我的要求：

1. 我不想<p>标签或任何内部<div>标记为可拖动。
2. 我需要能够输入输入字段。

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) {