Предотвращение всего, кроме определенного элемента

0

У меня есть страница, которая имеет элемент drop aable a1, а также определенный элемент a2 который можно сортировать. Файлы, упавшие в a1, считываются и депонируются в сортируемый список в a2. Загрузка и сортировка сценариев не включены в мой код ниже, поскольку они не имеют отношения к проблеме.

Проблема в том, что если какой-либо файл будет удален где угодно, кроме a1, браузер попытается открыть файл для отображения в браузере. Это совершенно очевидно с файлами изображений.

Я попытался отключить все, кроме a1 со следующим кодом, но это все еще не работает, я все равно получаю нежелательное перенаправление...

У меня есть Googled мой прикладом здесь, но, кажется, там много о добавлении перетаскивания, но очень мало в отношении предотвращения перетаскивания...

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно здесь со следующим кодом?

<div id="a1"></div>
<div id="a2"></div>
<script>
drop = $("not(#a1)");
drop.droppable("option",{disabled:true, tolerance:"pointer"});
drop.droppable("disable");
drop.on("drop",function(e){
    e.preventDefault();
}
</script>

Спасибо заранее!

  • 0
    not(#a1) не является допустимым селектором и возвращает пустой набор. Вы, вероятно, хотели написать :not(#a1) (с двоеточием). Кроме того, вы можете захотеть просто переопределить drop в document и иметь пузырьковую обработку, а не работать с каждым отдельным элементом.
  • 0
    Да, я хотел " :not(#a1) ", но кажется, что даже применение этого замораживает подэлементы, которые заполняются в a2 ... И мне нужно, чтобы эти подэлементы в a2 были перетаскиваемыми и, следовательно, сортируемыми в a2 ...
Показать ещё 2 комментария
Теги:
jquery-ui-sortable
droppable

3 ответа

0
Лучший ответ

После достаточного мастерства мне удалось придумать более подходящее решение...

Видя, что я действительно сосредоточен на предотвращении попадания файлов в отсортированную область, я решил сосредоточиться на определении характера отбрасываемого предмета...

drop = $(".all-slides");
drop.on('dragover', function(e){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
                                            drop.on('drop', function(e){
    e.preventDefault();
    dt = e.originalEvent.dataTransfer;
    if(dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file'))) {
        alert('You cannot upload images here. \nIf you wish to upload files, \nclick on the "Upload Images" button.');
    }
});

Проще говоря, событие drop прослушивает любую возможность передачи данных, и если нет возможности передачи данных, мы знаем, что это элемент DOM... В противном случае мы знаем это файл, и мы бросаем предупреждение...

Поделиться
1

Я создал простой JsFiddle, чтобы заставить его работать. В принципе, вы можете отменить событие с помощью обработчика самого документа, не беспокоясь о том, где был удален файл:

$("#a1").on('drop', function() {
    // your logic here
    alert('dropped on a1!');
});

$(document).on('drop dragover', function(e) {
    e.preventDefault();
});

Если вы используете более старую версию jQuery, вам, возможно, придется заменить функцию on live.

Поделиться
  • 0
    Этот код также не работает для меня ... Все еще делает нежелательное перенаправление
0

Вы использовали неправильный селектор jQuery для нет.

Попробуй это

drop = $("div").not("#a1");
Поделиться
  • 0
    К сожалению, это делает все перетаскиваемые и сортируемые элементы в a2 неподвижными ... И мне нужно, чтобы эти подэлементы в a2 были сортируемыми и подвижными в пределах a2 ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню