Draggable不會拖動

不知何故，我的可拖動控件無法拖動到佔位符中。Draggable不會拖動

我注意到它在drop()函數中給出了appendChild的一個錯誤，但是當我在那裏提醒時，我發現它甚至沒有那麼遠。

var people = ['Sinan', 'Babette', 'Thomas', 'Yannick', 'Nick']; 
 
$.each(people, function(key, val) { 
 
    $('#placeholders').append('<div class="dnd" data-id="' + val + '" ondrop="drop(event)" ondragover="testDiv(event, innerHTML)"></div>'); 
 
}); 
 

 
$('#seizeImg img').on('dragstart', function(event) { 
 
    drag(event); 
 
}); 
 

 
function testDiv(ev, x) { 
 
    if (x.length > 0) { 
 
    return false; 
 
    } else { 
 
    allowDrop(ev); 
 
    return true; 
 
    } 
 
} 
 

 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 

 
    var complete = false; 
 
    $.each('#seizeImg img', function(key, val) { 
 
    alert(key); 
 
    }); 
 
}

.dnd { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 10%; 
 
    height: 160px; 
 
    padding: 10px; 
 
    border: 2px solid #B7E6E6; 
 
    background: rgba(51, 255, 102, 0.2); 
 
} 
 

 
#seizeImg img { 
 
    width: 10%; 
 
    height: 160px; 
 
} 
 

 
div.label { 
 
    height: 25px; 
 
    text-align: center; 
 
    border: none; 
 
    background: none; 
 
} 
 

 
div.buf { 
 
    background: rgba(255, 0, 0, 0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="placeholders"> 
 
</div> 
 
<br> 
 
<br> 
 
<div id="seizeImg"> 
 
    <img id="Babette" src="img/Babette.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Thomas" src="img/Thomas.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Yannick" src="img/Yannick.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Sinan" src="img/Sinan.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Nick" src="img/Nick.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
</div>

來源

2017-05-19 Sinan Samet

我假設你正在使用安裝了拖放庫的jqueryUI。如果你不那麼做，可能會讓事情變得更容易一些。

，你可以把它一起工作：

$('#seizeImg img').draggable();

，如果你想要的下降來保存數據所有你需要做的是：

$('#placeholders').droppable({ 
accept: $('#seizeImg img'), 
drop: function(){ 
//enter code here to take place whenever you drop something on it 
// if you want to take a value from the object you are dropping on 
// the droppable object just use: 
var varID = (ui.draggable.attr("value"); 
    } 
});

它多了幾分簡潔和jQueryUI的取出很多猜測工作。

編輯： 除非你沒有包括頂部的代碼，你永遠不會調用實際的jqueryUI可拖動函數。大約在某處

$(document).ready({function(){ 
    // you have to include 
$('seizeImg img').draggable({function(){ 
    //add some more moving parts here if you need to 
    }); 
}

只是在HTML中設置draggable ='true'並不是一回事。

來源

2017-05-19 12:45:47 Jeanze

是的，我做到了，但它仍然表示找不到可拖動的函數。但主要問題是，有一個可拖動的圖層讓我無法點擊它。我已經在這個問題上工作了幾個小時，顯然它只是一些愚蠢的圖層 –

如果你已經到了你可以點擊它並拖動的地方但它仍然有問題，你可以隨時在圖層中：$（'seizeImg img'）。draggable（{function（）{// add function here}，//在這裏你可以添加堆棧：「seizeImg img」，appendTo ：「body」，zIndex：10000}）;它會讓你開始拖動最頂端的東西。 – Jeanze

是的，我減少了它上面的圖層的z-索引 –

你所面臨的問題是由以下行

var data = ev.dataTransfer.getData("text"); 
ev.target.appendChild(document.getElementById(data));

您試圖追加是Node類型不是元素引起的。這是因爲data是一個空字符串，因此document.getElementById("")返回null這是不允許傳遞到appendChild。

來源

2017-05-19 12:45:13 mic4ael

是的，我注意到data evns在邊ev不存在，但爲什麼？這個相同的代碼在早期版本上工作 –

Draggable不會拖動

回答

相關問題