Предотвратить элемент "захват" мыши с помощью jQuery?
Я пытаюсь изменить размер встроенного объекта. Проблема в том, что когда мышь наводит курсор на объект, она берет на себя "управление" мышью, поглощая события движения. В результате вы можете расширить div, содержащий объект, но при попытке уменьшить его, если мышь входит в область объекта, изменение размера останавливается.
В настоящее время я скрываю объект во время движения. Мне интересно, есть ли способ просто предотвратить захват объекта мышью. Возможно, наложение другого элемента поверх него, который не позволяет событиям мыши достигать встроенного объекта?
использование ореолов при изменении размера не работает для встроенных объектов, кстати.
Добавление щедрости, поскольку я не могу заставить это работать. Чтобы собрать, просто сделайте следующее:
Предоставьте веб-страницу с вложенным PDF-файлом, центрированным на странице. PDF не может занимать всю страницу; сделайте его ширину / высоту 50% ширины окна браузера или что-то еще.
Используйте jQuery 1.2.6, чтобы добавить изменение размера к каждой стороне и углу PDF.
PDF НЕ ДОЛЖЕН ЗАПИСАТЬ МЫШЬ и прекратить перетаскивание при сжатии PDF. Это означает, что когда я щелкаю по краю PDF-файла и перетаскиваю его, когда мышь входит в поле отображения PDF-файла, операция изменения размера продолжается.
Это должно работать в IE 7. Условные хаки CSS (если gte ie7 или что-то еще) хороши.
Хммм... я думаю, что это может быть проблема с iframe...
<div style="text-align:center; padding-top:50px;">
<div id="doc" style="width:384px;height:512px;">
<iframe id="docFrame" style="width: 100%; height: 100%;"
src='http://www.ready.gov/america/_downloads/sampleplan.pdf'>
</iframe></div></div>
<div id="data"></div>
<script type="text/javascript">
$(document).ready(function() {
var obj = $('#docFrame');
$('#doc').resizable({handles:'all', resize: function(e, ui) {
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr({width: ui.size.width, height: ui.size.height});
}});
});
</script>
Это не работает Когда ваша мышь попадает в iframe, операция изменения размера останавливается.
Есть несколько хороших ответов; если щедрость иссякнет раньше, чем я смогу проверить их все, я восстановлю щедрость (те же 150 баллов).
8 ответов
Ну, я был совершенно не в состоянии найти пример XPS Document Viewer или еще много чего, но я смог придумать this working sample, Это не использует идею наложения, но это PDF, который вы можете изменить размер...
редактировать вещь, которая сделала эту работу без наложения был wmode параметр устанавливается в transparent, Я не очень знаком с деталями, но это сделало его приятным на IE7. Также работает на Firefox, Chrome, Safari и Opera.
новое редактирование с серьезными проблемами при работе с фреймами. Некоторая информация, которую я нашел, не очень обнадеживает. Разве это невозможно иметь с <object>? Или <object> внутри фрейма?
Я бы ответил на оверлей, но приведу реальный код:P
Я называю его "follower" вместо оверлея и используется в моем плагине ThreeSixty для jQuery (довольно простой исходный код, вы поймете, читая, что происходит с div "follower").
Вот что работает для меня, хотя это скрывает iframe при изменении размера. Это проблема для вас?
$(document).ready(function() {
var obj = $('#docFrame');
$('#doc').resizable(
{
handles: 'all',
resize: function(e, ui) {
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr({ width: ui.size.width, height: ui.size.height });
},
start: function(e, ui) { $('#docFrame').hide(); },
stop: function(e, ui) { $('#docFrame').show(); }
});
});
С IE вы можете вызвать setCapture()/releaseCapture(), он отлично работал с iframes для меня.
С Firefox - прозрачное наложение, как уже предлагалось.
Overlay.
Одним словом ответы запрещены, в этом предложении нет глагола.
Возможно, SmartLook является альтернативой. Это как те сценарии лайтбокса, но для встроенного контента, такого как PDF-файлы.
Благодаря новой функции "Недавние действия" в Stackru я увидел, что вы попросили предоставить пример кода. Я провел только незначительное тестирование (кажется, не получается заставить ваш код встроить PDF в IE, возможно, для этого требуется плагин PDF, который я не установил), так что это может не сработать. Но это начало.
<div style="text-align: center; padding-top: 50px;">
<div id="doc" style="width: 384px; height: 512px; position: relative;">
<div id="overlay" style="position: absolute; top: -5px; left: -5px;
padding: 5px; width: 100%; height: 100%; background: red;
opacity: 0.5; z-index: 1; display: none;"></div>
<iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
src='http://www.ready.gov/america/_downloads/sampleplan.pdf'></iframe>
</div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
var obj = $('#docFrame'), overlay = $('#overlay');
$('#doc').resizable({
handles: 'all',
start: function() {
overlay.show();
},
resize: function(e, ui) {
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr({
width: ui.size.width,
height: ui.size.height
});
},
stop: function(e, ui) {
overlay.hide();
}
});
});
</script>
var dframe = $("#docFrame");
$(document).ready(function () {
var b = dframe;
$("#doc").e({
b: "all",
resize: function (c, a) {
$("#data").html(a.size.width + "x" + a.size.height);
object.attr({
width: a.size.width,
height: a.size.height
});
},
start: function () {
dframe.hide();
},
stop: function () {
dframe.show();
}
});
});