如果容差條件不符合，則提示消息

我正在使用tolerance: "fit"作爲我的可插拔div，它完美地工作。只有當可拖動的對象符合可放置的div時纔會放下。如果容差條件不符合，則提示消息

$('#drag').draggable({ revert: "invalid"}); 
    $('#drop').droppable({ tolerance: "fit" });

我想是的，我想如果用戶刪除了可拖動的div它不適合投擲的，稱「請集裝箱內下降的對象」，以提醒消息。任何想法如何做到這一點？我對此沒有任何發現。

Small Demo

來源

2016-02-10 Yo Yo

只是爲了澄清，你希望當可拖動的元素被拖放到可拖動元件之外時提醒你。 – Sami

@Sami外部或即使只有一半的可拖動內容可丟棄..（這就是爲什麼我說'如果容忍條件不符合'） –

檢查是否這樣做的竅門：http://stackoverflow.com/a/8093433/ 3279876 – Sami

這可能不是一個很好的解決方案，但東西，你可以工作。

應該與stop回調與你使用的Element.getBoundingClientRect()做，你可以做這樣的事情：

$('#drag').draggable({ 
 
    revert: "invalid", 
 
    stop: function(event, ui) { 
 
    var drop = $("#drop")[0].getBoundingClientRect(); 
 
    var drag = ui.position; 
 
    var bool = drag.top >= drop.top && 
 
       drag.left >= drop.left && 
 
       ui.helper.width() <= drop.width && 
 
       ui.helper.height() <= drop.height; 
 
    console.log("drag", ui, "drop", drop); 
 
    if (!bool) { 
 
     $('pre').append('Please drop object within the Container.<br>'); 
 
    } 
 
    } 
 
}); 
 
$('#drop').droppable({ 
 
    tolerance: "fit" 
 
});

#drag { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: red; 
 
} 
 
#drop { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 5px; 
 
    margin-top: 10px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
 
<pre></pre> 
 
<div id="drag"> 
 
</div> 
 
<div id="drop"> 
 
</div>

來源

2016-02-10 08:23:20 Jai

看起來很有前途和有趣。你能檢查我的答案，並告訴我是否也可以這樣做 –

我所做的僅僅是使用window變量。這是在draggable的start:期間設置的。如果丟失，我正在更改window變量的droppable，稍後檢查變量是否已更改，那意味着它已被刪除。

簡單而甜美。你對此的看法

來源

2016-02-10 08:35:14

是的，這是另一個想法，可以實施。 – Jai

哈哈謝謝..我已經評論你的這篇文章 –

如果容差條件不符合，則提示消息

回答

相關問題