24.08.2021
20:04
24.08.2021 20:04:38
Кастомизировала создание тикета в техподдержку, сделала добавление файлов drag-and-drop
Поддержка Битрикса мне долго отвечала, но потом ответила (когда я уже все запилила) и дала ссылку на данную статью https://dev.1c-bitrix.ru/community/webdev/user/64008/blog/7270/ Можно сделать средствами Битрикса, но я не разбиралась. У меня сделано с jquery |
php<div style="display:none;">
<?for ($i=0; $i <50 ; $i++):?>
<input name="FILE_<?=$i?>" id="TICKET_FILE_<?=$i?>" size="30" type="file" class="ticket-files"/> <br />
<?endfor;?>
<input type="hidden" name="files_counter" id="files_counter" value="<?=$i?>" />
</div>
<div id="draggable" class="ui-widget-content">
<div class="helper-text">...перетащите файлы сюда или кликните для загрузки...</div>
</div> |
css
#draggable {
background: #eaf0f7;
width: 100%;
min-height: 80px;
line-height: 29px;
text-align: left;
font-weight: bold;
position: relative;
border-radius: 3px;
padding: 5px 5px 30px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#draggable .helper-text{
position: absolute;
bottom: 0;
width: 98%;
color: gray;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#draggable span{
background: white;
color: #174360;
padding: 5px 4px 6px 8px;
border: 1px solid #7497b3;
border-radius: 7px;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#draggable span:hover{
background: #cfe3f2;
}
#draggable.in {
background: #dce5ee;
}
#draggable.in .helper-text{
color: #000;
} |
js
$('#draggable').on(
'click',
function(e){
e.preventDefault();
e.stopPropagation();
input = $('.ticket-files').filter(function() {
return !this.files.length;
}).first();
input.addClass('arm-add');
input.trigger('click');
});
$('#draggable').on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
$('#draggable').addClass('in');
}
)
$('#draggable').on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#draggable').on(
'dragleave',
function(e) {
$('#draggable').removeClass('in');
});
$('#draggable').on(
'drop',
function(e){
$('#draggable').removeClass('in');
if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
let dT;
let input;
for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
dT = new DataTransfer();
dT.items.add(e.originalEvent.dataTransfer.files[i]);
input = $('.ticket-files').filter(function() {
return !this.files.length;
}).first();
input[0].files = dT.files;
$('#draggable').append("<span class='filename-upload' data-id="+input[0].id+">"+e.originalEvent.dataTransfer.files[i].name+" x</span>")
}
}
}
);
$(document).on('change','.ticket-files.arm-add',function(e){
let elem = e.target;
if(elem.files.length>0){
$('#draggable').append("<span class='filename-upload' data-id="+elem.id+">"+elem.files[0].name+" x</span>")
}
});
$(document).on('click','.filename-upload',function(e){
//console.log(e);
let elem = e.target;
dT = new DataTransfer();
$('#'+$(elem).data('id'))[0].files = dT.files;
$('#'+$(elem).data('id')).removeClass('arm-add');
$(elem).remove();
});
|
24.08.202120:0424.08.2021 20:04:38
Если блог был полезным, можете угостить меня "чашечкой кофе" :)
Сбер по номеру телефона +7 (953) 585-13-09 Вероника.
Спасибо!